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

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

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

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'; 
    } 
    } 
}

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

источник

2010-11-24 necker

Можете ли вы показать фактическую разметку вашего браузера (а не функцию на стороне сервера, которую вы используете для печати этих пролетов)? – 2010-11-24 12:09:28

sth ... и так далее. Может быть, проблема в том, что не всегда существуют элементы horseThumb_xx? И поэтому мой js в chrome выдает ошибку: невозможно прочитать свойство 'style' of null. Но это связано с тем, что количество лошадиных животных меняется, а не всегда. Но я думал, что не стоит останавливать функцию «за», чтобы остановить велоспорт? – necker 2010-11-24 12:29:00

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

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>

источник

2010-11-24 12:01:34

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

ответ

Смежные вопросы