如何更改多個元素的樣式？

我有一個讓我們說十匹馬的圖片。每次點擊一匹馬，我都希望它的背景變成灰色。而當另一匹馬被點擊時，我也希望這匹馬的背景顏色變成灰色，並且所有其他背景都變成灰色。如何更改多個元素的樣式？

如果我不喜歡這樣

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

我不知道我在做什麼錯在這裏。我試着用各種方法改變它，但不知道爲什麼它不起作用。所以任何答案將非常感激！

來源

2010-11-24 necker

你能顯示你的瀏覽器收到的實際標記（不是你用來打印這些跨度的服務器端功能）嗎？ – 2010-11-24 12:09:28

sth ...等等。也許問題是因爲並不總是horseThumb_xx存在的元素？所以我在Chrome中的js拋出一個錯誤：無法讀取null的屬性'樣式'。但那是因爲horseThumbs的數量發生了變化，並不總是在那裏。但我認爲不應該停止「for」功能來停止騎車？ – 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

如何更改多個元素的樣式？

回答

相關問題