複数の要素のスタイルを変更するにはどうすればよいですか？

私は馬の10人の親指写真を撮ってみましょう。 1つの馬がクリックされるたびに、背景が灰色になるようにしたいと思います。そして、別の馬がクリックされたときと同じように、私はその馬の背景色を灰色にし、それを用いて他のすべての背景を白くしたいと思います。複数の要素のスタイルを変更するにはどうすればよいですか？

私はこの

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

クリック馬の変化の背景のようにそれを行う場合。私が今やらなければならないことは、IDが同じでないときに背景が白くなるようにelse文を追加することだけです。

だから、私はこれがうまくいくと思って、なぜそうでないのか分からないと思った。渡されたIDは正しいものの、何も起こりません。（アラート（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

ブラウザが実際に受け取ったマークアップを表示できますか（それらのスパンを印刷するために使用するサーバー側の機能ではありません）。 –

sth ...など。たぶん問題は、常にhorseThumb_xxという要素が存在するとは限らないからです。そして、クロムの私のjsはエラーをスローする：ヌルのプロパティ 'スタイル'を読むことができません。しかし、それは、馬の数が変化し、必ずしもすべてがそこにあるわけではないからです。しかし、私は "for"機能がサイクリングを止めるのを止めるべきではないと思った？ – necker

はいこれはそれです。私は要素が存在しない場合、エラーが機能しなくなることを知りませんでした。 – necker

エラーが発生していないスクリプトが実行されていることを確認しますか？私は以下の声明を疑う：

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

ありがとうございます。問題は、私の機能が、存在しなかった要素の背景色を変更しようとしたためです。それで、仕上げができませんでした。私からスマートではない:)。編集：私はなぜそれが動作した（それは背景色を変更しました）他のステートメントがないときはわからないのですが？この場合でもエラーがあるはずです。 – necker

@necker elseとelseは常に 'else'ステートメントに入り、elは 'null'になる 'el.style'にアクセスしようとします。 'else'ステートメントをドロップすると、idが一致する場合にのみアクセスし、 'el'にアクセスします。 –

複数の要素のスタイルを変更するにはどうすればよいですか？

答えて

関連する問題