更改按鈕上圖像的多個屬性單擊

我想要更改圖像的兩個屬性：src & data-zoom-image，單擊按鈕。更改按鈕上圖像的多個屬性單擊

只是告訴我，我在做錯誤的JS下面的代碼。

src正在改變，但數據縮放圖像無法正常工作。

<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>

來源

2017-01-30 New Bie

您使用'more'元素與'id'相同，這是錯誤的。 –

ID必須是唯一的， –

你已經有類似的ID應該是唯一的，你必須使用「的setAttribute」屬性修改屬性值::

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");

來源

2017-01-30 14:10:14

兄弟，謝謝。但數據縮放圖像不起作用。 –

您可以使用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。

來源

2017-01-30 14:36:15

我認爲你想在兩個圖像之間切換？

您只需要一個包含一個圖像的按鈕。

然後你在javascript中寫一個函數，這會改變你的兩個屬性。

來源

2017-01-30 14:37:16 Harriet

更改按鈕上圖像的多個屬性單擊

回答

相關問題