jQuery replace an image on click

HTML

<div class="button-container">
<button class="black-button"></button>
<button class="red-button"></button>
<button class="blue-button"></button>
<button class="yellow-button"></button>
</div>

<img id="change-image" src="/wp-content/uploads/2018/09/black.jpg" alt="Black Image" />

jQuery

jQuery(document).ready(function($){

$('.black-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2018/09/black.jpg');
     }
 });
 
$('.red-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2018/09/red.jpg');
     }
 });
 
$('.blue-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2018/09/blue.jpg');
     }
 });
 
$('.yellow-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2018/09/yellow.jpg');
     }
 });
});

Each button's CSS class is targetted on click which then targets the ID of the image that changes the src attribute of the image.

This uses jQuerys attr() method which can change the value of a given attribute - so also here the alt text value can be changed for each image.