Изменить изображение OnClick с помощью jQuery

Чтобы изменить картинку по клику с помощью jQuery, вы можете использовать несколько методов. Вот несколько примеров:

Метод 1: использование функции attr()

<img id="myImage" src="image1.jpg" alt="Image 1">
<button id="changeButton">Change Picture</button>
<script>
  $(document).ready(function(){
    $('#changeButton').click(function(){
      $('#myImage').attr('src', 'image2.jpg');
    });
  });
</script>

Метод 2: использование функции prop()

<img id="myImage" src="image1.jpg" alt="Image 1">
<button id="changeButton">Change Picture</button>
<script>
  $(document).ready(function(){
    $('#changeButton').click(function(){
      $('#myImage').prop('src', 'image2.jpg');
    });
  });
</script>

Метод 3: использование функции html()

<div id="imageContainer">
  <img id="myImage" src="image1.jpg" alt="Image 1">
</div>
<button id="changeButton">Change Picture</button>
<script>
  $(document).ready(function(){
    $('#changeButton').click(function(){
      $('#imageContainer').html('<img id="myImage" src="image2.jpg" alt="Image 2">');
    });
  });
</script>

Метод 4. Использование функции replaceWith()

<div id="imageContainer">
  <img id="myImage" src="image1.jpg" alt="Image 1">
</div>
<button id="changeButton">Change Picture</button>
<script>
  $(document).ready(function(){
    $('#changeButton').click(function(){
      $('#myImage').replaceWith('<img id="myImage" src="image2.jpg" alt="Image 2">');
    });
  });
</script>