Is there a cleaner way of writing this jQuery code to swap images?

Question

I have this code that basically swaps an image every time the related checkbox is clicked. However, the jQuery code seems quite repetitive and I'd be interested to know how I could write this to be cleaner.

$(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">

question from:https://stackoverflow.com/questions/65843801/is-there-a-cleaner-way-of-writing-this-jquery-code-to-swap-images

Answer 1

The technique you're looking for is called Don't Repeat Yourself, or DRY. To do apply that to the code you've shown you can amend the HTML to use a combination of common classes, to group elements by behaviour, and data attributes, to place custom metadata on an element.

From there you can use a single event handler for all elements, with the differences applied through the data attributes. Try this:

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