обновления исходного изображения на несколько способных изображения на кнопке мыши

Question

Я хочу изменить изменяемые изображения на кнопке мыши

<button id="btn1" >Toggle1</button> ` 
<button id="switch" >Toggle2</button> 

<img class="im1" src="image1_bw.jpg" /> 
<img class="im1 im2" src="image2_bw.jpg" /> 
<img class="im2 im3" src="image3_bw.jpg" /> 
<img class="im4" src="image4_bw.jpg" />` 

Ive попытался это, но можно обновить только 1 изображение

$('#buttonswitch').on({ 'click': function() { 

     $('#switch').attr('src','../swap/image1_bw_sec.jpg'); 
    } 
}); 

и я хочу их чтобы переключиться обратно, когда btn1 это нажать так в основном функция переключения

Большое спасибо заранее

****** UPDATE *********

codepen

Answer 1

Это может быть ваше решение.

Fiddle

$("#box1").click(function() { 
 
    $(this).toggleClass("switch1"); 
 
}); 
 
$("#box2").click(function() { 
 
    $(this).toggleClass("switch2"); 
 
});

#box1 { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: url("http://www.musicmatters.ie/images/bara4.jpg") no-repeat; 
 
    background-size: contain; 
 
} 
 
.switch1 { 
 
    background: url("http://www.musicmatters.ie/images/bara3.jpg") no-repeat!important; 
 
    background-size: contain!important; 
 
    width: 200px!important; 
 
    height: 200px!important; 
 
} 
 
#box2 { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: url("http://www.musicmatters.ie/images/volunteer1.jpg") no-repeat; 
 
    background-size: contain; 
 
} 
 
.switch2 { 
 
    background: url("http://www.musicmatters.ie/images/volunteer2.jpg") no-repeat!important; 
 
    background-size: contain!important; 
 
    width: 200px!important; 
 
    height: 200px!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div id="box1"> 
 

 
    &nbsp; 
 

 
</div> 
 

 
<div id="box2"> 
 

 
    &nbsp; 
 

 
</div>