javascript - 使用 JS 更改多个元素的背景颜色，然后在选择另一个元素时更改

Question

我的表格中有一系列图片，当单击其中一张图片时，td 的背景颜色会发生变化。但只能选择一项。

这是我到目前为止所拥有的，但是它改变了被点击的每个人的背景:

<table>
  <tr>
    <td width="100px" valign="top" id="panel1">
      <img src="pic1.jpg" id="setDesign1">
      <script>
        document.getElementById("setDesign1").addEventListener("click", function() {
          this.style.backgroundColor = "red";
          return false;
        });
      </script>
    </td>
    <td width="100px" valign="top" id="panel2">
      <img src="pic2.jpg" id="setDesign2">
      <script>
        document.getElementById("setDesign2").addEventListener("click", function() {															 
        this.style.backgroundColor = "red";
        return false;
        });
      </script>
    </td>
    <td width="100px" valign="top" id="panel3">
      <img src="pic3.jpg" id="setDesign3">
      <script>
        document.getElementById("setDesign3").addEventListener("click", function() {
          this.style.backgroundColor = "red";
          return false;
        });
      </script>
    </td>
  </tr>
</table>

如有任何帮助，我们将不胜感激

Answer 1

如果使用 jquery 会很容易，

$('img').click(function(this){$('img').not(this).css('color','white')
$(this).css('color','red')
})

与 JavaScript 中的操作相同，将所有其他 img 标签背景设置为白色，将同一项目设置为红色。