画像のグループ内でjavascriptを1つだけ変更する

Question

JavaScriptで本当に新しいです。新しい画像をクリックすると、その画像はSRCや他のものも変更されます。

これはコードである：

<a href="#pduno"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pduno.png" width="13" height="11" /></a> 
<a href="#pddos"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pddos.png" width="13" height="11" /></a> 
<a href="#pddos"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pddos.png" width="13" height="11" /></a> 

pduno.pngは "アクティブ" イメージとpddos.pngでは "desactive" 画像です。私は3枚の画像を持っている

レッツ・イメージがpduno - pddos - pddos私は2 pddosのいずれかをクリックすると、それはpdunoとpddosにpduno変更したものに変更

を。つまり、pdunoの画像は1つだけで残りはpddosです。

私はこれを使用してスクロールギャラリーを作成しています。 pdunoは、どのギャラリーが展示されているかを示すために働きます。

Answer 1

私はそのため

をjQueryライブラリを使用することになりますが、このコード（何かをダウンロードする必要はありません）を書き込むことを含めることができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" /> 

そして、私はこれを行うだろう：

<a href="#pddos"><img class="pdimg" src="img/pduno.png" width="13" height="11" /></a> 
<a href="#pddos"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a> 
<a href="#pddos"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a> 

をHTMLで、私はすべてのスクリプトを削除し、それらをここに移動：

<script> 
$('.pdimg').click(function(){ //This registers the function with the click event 
    $('.pdimg').attr('src', 'img/pddos.png'); //This resets the image to pddos 
    $(this).attr('src', 'img/pddos.png'); //This sets the image to uno, 
          // "this" will be the img that you clicked on. 
} 
</script> 

Answer 2

document.getElementsByClassNameは、単一の要素ではなく文書からノードリストを選択します。選択した各要素のsrc属性を変更するには、リストをループする必要があります。

また、すべてのイメージをpddosにリセットしてからアクティブにするには、pdunoに設定してからすべてをリセットすることはできません。 （あなたには、いくつかのそれほど単純ではない関数を使用する必要があるため）