jQuery 在按钮单击时交换图像

Question

我正在尝试创建一个由三个 div 组成的 block ，单击它们时将交换图像。到目前为止我已经有了这个..

	$( ".button1" ).click(function() {
		$(this).attr("src","https://dummyimage.com/100x100/000000/fff&text=1-on")
	});
	$( ".button2" ).click(function() {
		$(this).attr("src","https://dummyimage.com/100x100/000000/fff&text=2-on")
	});
	$( ".button3" ).click(function() {
		$(this).attr("src","https://dummyimage.com/100x100/000000/fff&text=3-on")
	});
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button1">
    <img src="https://dummyimage.com/100x100/000000/fff&text=1-off">
</div>
<div class="button2">
    <img src="https://dummyimage.com/100x100/000000/fff&text=2-off">
</div>
<div class="button3">
    <img src="https://dummyimage.com/100x100/000000/fff&text=3-off">
</div>

这对我不起作用，有人有类似的例子可以指点我吗？

我还希望一次只显示一张“打开”图像，这样当其中一张图像打开时，其他图像就会关闭。

Answer 1

为所有 div 指定相同的类，然后创建一个 click 事件，该事件将打开当前的 img，同时关闭其他 img:

$('.button img').click(function() {
  var src = $(this).attr('src');

  $(this).attr('src', src.replace('-off', '-on'));   //change off to on

  $('img').not(this).attr('src', function(_, src) {  //change on to off
    return src.replace('-on', '-off');
  });
});

片段:

$('.button img').click(function() {
  var src = $(this).attr('src');
  
  $(this).attr('src', src.replace('-off', '-on'));   //change off to on
  
  $('img').not(this).attr('src', function(_, src) {  //change on to off
    return src.replace('-on', '-off');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
  <img src="https://dummyimage.com/100x100/000000/fff&text=1-off">
</div>
<div class="button">
  <img src="https://dummyimage.com/100x100/000000/fff&text=2-off">
</div>
<div class="button">
  <img src="https://dummyimage.com/100x100/000000/fff&text=3-off">
</div>