ボタン上の画像の複数の属性を変更する

Question

ボタンのクリックで、image：src & data-zoom-imageという2つの属性を変更したい。

ちょうど私が何をしているか教えてください以下のJS onclickコードで間違っています。

srcは変更されていますが、data-zoom-imageは正しく動作していません。

<div class=""> 
    <img id="zoom_01" src="http://i.imgur.com/Vl2kjp8b.jpg" data-zoom-image="http://i.imgur.com/Vl2kjp8b.jpg" /> 
</div> 

<button onclick="document.getElementById('zoom_01').src='http://i.imgur.com/Vl2kjp8b.jpg';document.getElementById('zoom_01').data-zoom-image='http://i.imgur.com/Vl2kjp8b.jpg'"> 
    <img id="zoom_01" src="http://i.imgur.com/Vl2kjp8b.jpg" data-zoom-image="http://i.imgur.com/Vl2kjp8b.jpg" /> 
</button> 

<button onclick="document.getElementById('zoom_01').src='http://i.imgur.com/fkR51QDb.jpg';document.getElementById('zoom_01').data-zoom-image='http://i.imgur.com/fkR51QDb.jpg';"> 
    <img id="zoom_01" src="http://i.imgur.com/fkR51QDb.jpg" data-zoom-image="http://i.imgur.com/fkR51QDb.jpg" /> 
</button> 

Answer 1

あなたはすでにあなたが属性値を変更する「のsetAttribute」プロパティを使用する必要があり、一意である必要があります同様のIDを持っている::

document.getElementById('zoom_01').setAttribute("src", "http://i.imgur.com/Vl2kjp8b.jpg"); 

document.getElementById('zoom_01').setAttribute("data-zoom-image", "http://i.imgur.com/Vl2kjp8b.jpg"); 

Answer 2

あなたはjQueryを使ってこれを達成することができます。

あなたのボタンに異なるidを追加し、それらをクリックするだけで、jQueryののattr関数を呼び出す：

<div class=""> 
    <img class="img_1" src="http://i.imgur.com/Vl2kjp8b.jpg" data-zoom-image="http://i.imgur.com/Vl2kjp8b.jpg" /> 
</div> 

<button id="zoom_01"> 
    <img class="img_2" src="http://i.imgur.com/Vl2kjp8b.jpg" data-zoom-image="http://i.imgur.com/Vl2kjp8b.jpg" /> 
</button> 

<button id="zoom_02"> 
    <img class="img_3" src="http://i.imgur.com/fkR51QDb.jpg" data-zoom-image="http://i.imgur.com/fkR51QDb.jpg" /> 
</button> 

jQueryのコード

$('#zoom_01').click(function(){ 
    $(this).find('img').attr('src','http://i.imgur.com/Vl2kjp8b.jpg'); 

    $(this).find('img').attr('data-zoom-image','http://i.imgur.com/Vl2kjp8b.jpg'); 
}); 

$('#zoom_02').click(function(){ 
    $(this).find('img').attr('src','http://i.imgur.com/fkR51QDb.jpg'); 

    $(this).find('img').attr('data-zoom-image','http://i.imgur.com/fkR51QDb.jpg'); 
}); 

をし、複数の要素に同じidを使用していません。このような機能を実現するには、代わりにsame class nameを使用してください。

Answer 3

私は、2つの画像を切り替えることを望んでいますか？

1つの画像を含むボタンが1つだけ必要です。

次に、javascriptで関数を書くと、2つのプロパティが変更されます。