jquery - 有没有更简洁的方式来编写这个 jQuery 代码来交换图像？

Question

我有这段代码，每次单击相关复选框时，它基本上都会交换图像。但是，jQuery 代码似乎很重复，我很想知道如何编写它以使其更清晰。

$(function() {

  $('#switch1').change(function(){
      if ($(this).is(':checked')) {
          $('#image1').attr('src','image1-swap-png');
        } else {
      $('#image1').attr('src','image1-swap-png');
        };
    });
  
  $('#switch2').change(function(){
      if ($(this).is(':checked')) {
          $('#image2').attr('src','image2-swap-png');
        } else {
      $('#image2').attr('src','image2-swap-png');
        };
    });
  
  $('#switch3').change(function(){
      if ($(this).is(':checked')) {
          $('#image3').attr('src','image3-swap-png');
        } else {
      $('#image3').attr('src','image3-swap-png');
        };
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>First example</h3>
    <div>
      <input type="checkbox" id="switch1">
      <label>Checkbox</label>
    </div>
    <img id="image1" src="image1.png">
    
    <h3>Second example</h3>
    <div>
      <input type="checkbox" id="switch2">
      <label>Checkbox</label>
    </div>
    <img id="image2" src="image2.png">
    
    <h3>Third example</h3>
    <div>
      <input type="checkbox" id="switch3">
      <label>Checkbox</label>
    </div>
    <img id="image3" src="image3.png">

提前致谢

Answer 1

您正在寻找的技术称为不要重复自己或 DRY。要将其应用于您显示的代码，您可以修改 HTML 以使用常见类的组合，按行为对元素进行分组，以及 data属性，将自定义元数据放在元素上。
从那里您可以对所有元素使用单个事件处理程序，并通过数据属性应用差异。尝试这个:

jQuery($ => {
  $('.switch').on('change', e => {
    let $image = $(e.target).closest('div').next('.image');
    $image.prop('src', $image.data(e.target.checked ? 'checked' : 'unchecked'));
  });
});

img { width: 50px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>First example</h3>
<div>
  <input type="checkbox" class="switch">
  <label>Checkbox</label>
</div>
<img class="image" src="https://i.imgur.com/dC9QaX4.png" data-checked="https://i.imgur.com/1uN7N7b.png" data-unchecked="https://i.imgur.com/dC9QaX4.png">

<h3>Second example</h3>
<div>
  <input type="checkbox" class="switch">
  <label>Checkbox</label>
</div>
<img class="image" src="https://i.imgur.com/dC9QaX4.png" data-checked="https://i.imgur.com/1uN7N7b.png" data-unchecked="https://i.imgur.com/dC9QaX4.png">