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

您正在寻找<input type="radio">

input[type=radio]:checked + label>img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

.input-hidden {
  position: absolute;
  left: -9999px;
}

<input 
  type="radio" name="emotion" 
  id="sad" class="input-hidden" />
<label for="sad">
  <img 
    src="//cdn0.iconfinder.com/data/icons/interface-63/24/402_-_Interface_radio_button_off_indeterminate_edit_radio_icon-128.png" 
    alt="I'm sad" />
</label>

<input 
  type="radio" name="emotion"
  id="happy" class="input-hidden" />
<label for="happy">
  <img 
    src="//cdn0.iconfinder.com/data/icons/interface-63/24/402_-_Interface_radio_button_off_indeterminate_edit_radio_icon-128.png" 
    alt="I'm happy" />
</label>

Answer 2

您可以尝试使用 class 而不是使用 id 属性。使用querySelectorAll()获取所有图像，然后遍历它们以附加 click 事件。在事件处理程序函数内部，重置所有图像的样式并将样式设置为当前元素：

var images = document.querySelectorAll(".setDesign");

images.forEach(function(el){
  el.addEventListener("click", function changeColor() { 
      images.forEach(i => i.parentNode.classList.remove('setStyle'));
      this.parentNode.classList.add('setStyle');
   });
 });

.setStyle{
  background-color: red;
  border: 1px solid blue;
}

<table>
  <tr>
    <td width="100px" valign="top" id="panel1">
      <img src="pic1.jpg" id="setDesign1" class="setDesign">
    </td>
    <td width="100px" valign="top" id="panel2">
      <img src="pic2.jpg" id="setDesign2" class="setDesign"> 
    </td>
    <td width="100px" valign="top" id="panel3">
      <img src="pic3.jpg" id="setDesign3" class="setDesign">
    </td>
  </tr> 
</table>

Answer 3

如果使用jquery会很容易，

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

使用javascript的相同方法，将所有其他img标记背景设置为白色，将同一项目设置为红色。

Answer 4

您可以收集所有可能使用tds着色的querySelectorAll并将事件侦听器附加到table。在图像上触发click事件时（它会冒泡到桌子上），您可以为必需的td元素上色，使其成为图像元素的父元素，并为所有其他元素重置颜色：

const tds = document.querySelectorAll("[id^='panel']");
const table = document.getElementsByTagName('table')[0];

table.addEventListener('click', (event) => {
  if (event.target.tagName === 'IMG') {
    tds.forEach(td => {
      td.style.backgroundColor = event.target.parentElement === td ? 'red' : 'white';
    })
  }
})

<table>
  <tr>
    <td width="100px" valign="top" id="panel1">
      <img src="pic1.jpg" id="setDesign1">
    </td>
    <td width="100px" valign="top" id="panel2">
      <img src="pic2.jpg" id="setDesign2">
    </td>
    <td width="100px" valign="top" id="panel3">
      <img src="pic3.jpg" id="setDesign3">
    </td>
  </tr>
</table>

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

4 个答案: