点击按钮时如何修改CSS属性？实现点击单个按钮仅显示对应color类span元素

你的问题很典型——现在的代码不管点哪个按钮，都会把所有.color元素都设为可见，因为showColor函数里直接获取了所有这个类的元素并遍历修改样式。要实现点击按钮只显示对应那个.color元素，可以试试下面几种方案，根据你的HTML结构选合适的：

方案1：用data属性绑定目标元素 #

如果你的HTML里，每个按钮和对应的.color元素可以通过id关联，那给按钮加个data-target属性指向对应.color元素的id：

<button id="btn-apple" data-target="apple-color">显示苹果颜色</button>
<span id="apple-color" class="color" style="visibility:hidden;">红色</span>

<button id="btn-banana" data-target="banana-color">显示香蕉颜色</button>
<span id="banana-color" class="color" style="visibility:hidden;">黄色</span>

然后修改JS代码，每个按钮点击时只操作自己data-target指向的元素：

// 苹果按钮的事件
document.getElementById("btn-apple").addEventListener("click", function() {
  const targetColor = document.getElementById(this.dataset.target);
  targetColor.style.visibility = 'visible';
});

// 香蕉按钮同理
document.getElementById("btn-banana").addEventListener("click", function() {
  const targetColor = document.getElementById(this.dataset.target);
  targetColor.style.visibility = 'visible';
});

方案2：利用DOM结构的关联性 #

如果按钮和对应的.color元素是同一个父容器下的兄弟元素（比如都在一个水果卡片里），那不用额外加id，直接通过DOM遍历找到对应的元素：

<div class="fruit-card">
  <button id="btn-apple">显示苹果颜色</button>
  <span class="color" style="visibility:hidden;">红色</span>
</div>

<div class="fruit-card">
  <button id="btn-banana">显示香蕉颜色</button>
  <span class="color" style="visibility:hidden;">黄色</span>
</div>

JS代码可以这样写：

document.getElementById("btn-apple").addEventListener("click", function() {
  // 找到当前按钮的父容器下的.color元素
  this.parentElement.querySelector('.color').style.visibility = 'visible';
});

document.getElementById("btn-banana").addEventListener("click", function() {
  this.parentElement.querySelector('.color').style.visibility = 'visible';
});

方案3：更高效的事件委托（推荐） #

如果按钮数量多，一个个绑定事件太麻烦，可以用事件委托——给所有按钮的父容器绑定一次事件，通过事件源判断点击的是哪个按钮：

<div id="fruit-container">
  <button class="color-btn" data-fruit="apple">显示苹果颜色</button>
  <span class="color apple-color" style="visibility:hidden;">红色</span>

  <button class="color-btn" data-fruit="banana">显示香蕉颜色</button>
  <span class="color banana-color" style="visibility:hidden;">黄色</span>
</div>

JS代码：

document.getElementById('fruit-container').addEventListener('click', function(e) {
  // 判断点击的是按钮
  if (e.target.classList.contains('color-btn')) {
    const fruitType = e.target.dataset.fruit;
    // 如果需要点击新按钮时隐藏之前的颜色，先把所有.color设为隐藏
    document.querySelectorAll('.color').forEach(colorEl => {
      colorEl.style.visibility = 'hidden';
    });
    // 再显示当前对应的颜色
    document.querySelector(`.${fruitType}-color`).style.visibility = 'visible';
  }
});

这样不管你加多少个水果按钮，都不用再写新的事件绑定代码，维护起来更方便~

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