Как изменить стиль нескольких элементов? - PullRequest
Новая
       2

Как изменить стиль нескольких элементов?

2 голосов
/ 24 ноября 2010

У меня, скажем, десять больших пальцев лошадей. И каждый раз, когда нажимают одну лошадь, я бы хотел, чтобы ее фон стал серым. И то же самое, когда нажимают на другую лошадь, я бы хотел, чтобы цвет фона этой лошади стал серым, а все остальные фоны стали белыми.

Если я сделаю это так 

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

Фон кликаемой лошади меняется. Все, что мне нужно сделать сейчас, это добавить оператор else, чтобы, когда идентификатор не совпадал, фоны стали белыми.

Так что я подумал, что это сработает, и понятия не имею, почему это не так. Ничего не происходит, хотя переданный идентификатор правильный. (проверено с предупреждением (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';
   }
  }
}​

Я не знаю, что я здесь делаю неправильно. Я пытался изменить его различными способами, но не могу понять, почему он не работает. Так что любые ответы будут очень признательны!

1 Ответ

1 голос
/ 24 ноября 2010

Подтвердите, что скрипт работает без каких-либо ошибок?Я подозреваю следующее утверждение: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...