如何为图片上的每个按钮设置不同的切换文本？

功能需求 #

• 点击任意按钮，按钮展开并显示该按钮的专属签名文本
• 再次点击已展开的按钮，或点击背景图片，按钮恢复初始状态（收起并显示"+"）

完整实现代码 #

HTML 代码 #

<div class="image-container">
  <img src="../img/stadium.jpg" alt="体育场" class="background-img">
</div>
<div class="buttons-container">
  <button class="circle cir-1" data-text="体育场区域1">+</button>
  <button class="circle cir-2" data-text="体育场区域2">+</button>
  <button class="circle cir-3" data-text="体育场区域3">+</button>
  <button class="circle cir-4" data-text="体育场区域4">+</button>
  <button class="circle cir-5" data-text="贵宾区1">+</button>
  <button class="circle cir-6" data-text="贵宾区2">+</button>
  <button class="circle cir-7" data-text="贵宾区3">+</button>
  <button class="circle cir-8" data-text="媒体区">+</button>
  <button class="circle cir-9" data-text="工作人员区">+</button>
  <button class="circle cir-10" data-text="观众区">+</button>
</div>

CSS 代码 #

* {
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
}

.image-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.buttons-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 让容器不拦截点击，只让按钮接收点击 */
}

.circle {
  height: 27px;
  width: 27px;
  cursor: pointer;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: absolute; /* 按钮用绝对定位 */
  pointer-events: auto; /* 按钮自己接收点击 */
}

.cir-1 {
  background: rgb(153 255 153 / 0.7);
  left: 592px;
  top: 435px;
}

.cir-2 {
  background: rgb(153 255 153 / 0.7);
  left: 1000px;
  top: 363px;
}

.cir-3 {
  background: rgb(153 255 153 / 0.7);
  left: 1148px;
  top: 597px;
}

.cir-4 {
  background: rgb(153 255 153 / 0.7);
  left: 960px;
  top: 709px;
}

.cir-5 {
  background: rgba(26, 1, 255, 0.7);
  left: 508px;
  top: 256px;
}

.cir-6 {
  background: rgba(26, 1, 255, 0.7);
  left: 390px;
  top: 640px;
}

.cir-7 {
  background: rgba(26, 1, 255, 0.7);
  left: 944px;
  top: 567px;
}

.cir-8 {
  background: rgba(26, 1, 255, 0.7);
  left: 1236px;
  top: 433px;
}

.cir-9 {
  background: rgba(26, 1, 255, 0.7);
  left: 1380px;
  top: 636px;
}

.cir-10 {
  background: rgba(26, 1, 255, 0.7);
  left: 1197px;
  top: 204px;
}

.circle:hover {
  transform: scale(1.1);
}

.circle.active {
  width: max-content;
  transform: scale(1.1);
  border-radius: 15px;
  padding: 0 8px;
}

JavaScript 代码 #

// 处理按钮点击逻辑
function toggleButton(circle) {
  const isActive = circle.classList.toggle('active');
  if (isActive) {
    // 展开时显示专属文本
    circle.innerText = `- ${circle.dataset.text}`;
  } else {
    // 收起时恢复"+"
    circle.innerText = '+';
  }
}

// 关闭所有已展开的按钮
function closeAllButtons() {
  document.querySelectorAll('.circle.active').forEach(circle => {
    circle.classList.remove('active');
    circle.innerText = '+';
  });
}

// 给所有按钮绑定点击事件
const allButtons = document.querySelectorAll('.circle');
allButtons.forEach(button => {
  button.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止事件冒泡到图片
    toggleButton(button);
  });
});

// 给背景图片绑定点击事件，关闭所有按钮
document.querySelector('.background-img').addEventListener('click', closeAllButtons);

关键修改说明 #

1. HTML结构优化：

   • 给图片和按钮分别添加容器，便于布局控制
   • 每个按钮通过data-text属性存储专属文本，实现自定义内容

2. CSS修复与优化：

   • 移除原代码中全局position: fixed的错误设置，避免布局混乱
   • 按钮容器设置pointer-events: none，确保点击图片时不会被容器拦截
   • 按钮使用position: absolute定位，通过left和top替代原有的margin，定位更精准

3. JS功能完善：

   • 新增closeAllButtons函数，实现点击图片关闭所有展开按钮的需求
   • 按钮点击时阻止事件冒泡，避免触发图片的关闭逻辑
   • 通过读取按钮的data-text属性，实现每个按钮显示专属文本的功能

内容的提问来源于stack exchange，提问作者Olga