Question

我有一个让我们说十匹马的照片。每当一匹马被点击时，我希望它的背景变成灰色。当另一匹马被点击时，我希望那匹马的背景颜色变成灰色，随之而来，所有其他背景都会变成白色。

如果我这样做

function changeBackHorse(id) {
  for (var i = 0; i < 25; i++) {
   if (id == i) { 
     document.getElementById("horseThumb_" + id)
       .style.backgroundColor = '#888';
   }
  }
}

点击马的背景发生了变化。我现在要做的就是添加一个else语句，这样当ID不相同时，背景变为白色。

所以我认为我认为这会起作用，并且不知道为什么它不会。尽管传递的ID是正确的，但没有任何反应。（用alert（id）测试）。

<span id="horseThumb_<%= horse_thumb.id %>"
 onclick="changeBackHorse('<%= horse_thumb.id %>');">
 <%= image ... %>
</span>

脚本：

function changeBackHorse(id) {
  for (var i = 0; i < 25 ; i++) {
   var el = document.getElementById("horseThumb_" + i);
   if (id == i){
    el.style.backgroundColor = '#888';
   } else {
    el.style.backgroundColor = '#fff';
   }
  }
}

我不知道我在这里做错了什么。我尝试以各种方式改变它，但无法弄清楚它为什么不起作用。所以任何答案都会非常感激！

Answer 1

确认该脚本是否正在运行而不会抛出任何错误？我怀疑以下声明：

for (i;i<25;i++) { ...

确保计数正确。我修剪了你的代码，它对我有用：

<html>
<head>
<script>
function changeBackHorse(id){
  var i=0;
  for (i;i<5;i++) {
   if (id == i){
    document.getElementById("horseThumb_"+id).style.backgroundColor='#888'
   }
   else{
    document.getElementById("horseThumb_"+i).style.backgroundColor='#fff'

   }
  }
}
window.onload = function() {
 changeBackHorse(1);
}
</script>
</head>
<body>
<div id="horseThumb_0">horse 0</div>
<div id="horseThumb_1">horse 1</div>
<div id="horseThumb_2">horse 2</div>
<div id="horseThumb_3">horse 3</div>
<div id="horseThumb_4">horse 4</div>
</body>
</html>

如何改变多个元素的风格？

1 个答案: