javascript - 单击时更改按钮的显示图像

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

您可以使用切换功能在两个图像之间切换，例如在此处输入链接描述，

$('.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");


})