Question

我有几个按钮：

<button class="image1-button" data-image="bg_images/1.jpg"><img src="images/button.png"></button>
<button class="image1-button" data-image="bg_images/2.jpg"><img src="images/button.png"></button>
<button class="image1-button" data-image="bg_images/3.jpg"><img src="images/button.png"></button>
<button class="image1-button" data-image="bg_images/4.jpg"><img src="images/button.png"></button>

如果其中一个被按下，我想像所选和未选择的按钮一样更改img。

<button class="image1-button" data-image="bg_images/4.jpg"><img src="images/button_selected.png"></button>

我的想法是做一个点击功能，但我在页面上有很多按钮（超过25个），我不认为添加不同图像的25个点击功能是正确的方法。感谢任何帮助，谢谢！

Answer 1

您不需要25个点击事件：

$(".image1-button").click(function(){
   $(".image1-button img").attr("src", "images/button.png")
   $(this).find("img").attr("src", "images/button_selected.png");
});

Answer 2

您可以使用切换功能在两个图像之间切换，如enter link description here，

$('.image1-button').click(function(){

   $(this).find('img').toggle('src', $(this).data('image'));

});

Answer 3

$(.image1-button).click(function(){
$(this).children('img').attr("src","images/button_selected.png");


})

更改按钮上的显示图像

3 个答案: