Переключение между картинками c помощью jquery

#javascript #jquery #css

Как добиться переключения между 4 картинками, так чтобы при клике на одну из них
 менялась главная картинка?

P.S. у меня там несколько таких галерей, и при клике на одну картинку меняются сразу
все. Попробовал с помощью this или next, не получилось. Что можно придумать, чтобы
предотврaтить это? 



$('.img_list img').on('click', function(e){
    $('.main_img img').attr('src', $(this).attr('src'));
});
.img_list{
  display:flex;
}
.main_img img{
    width:60%;

}
.img_list img{
  width:20%;
  align-self:flex-start;
}


  



  
  
  
  


  



  
  
  
  




    

Ответы

Ответ 1

$(".img_list img").click(function() {
  $(this).closest(".img_list").prev(".main_img").find("img").
    attr("src", $(this).attr("src"));
});
.img_list {
  display: flex;
}

.main_img img {
  width: 60%;
}

.img_list img {
  width: 20%;
  align-self: flex-start;
}


  



  
  
  
  



  



  
  
  
  



Ответ 2

$('.img_list img').on('click', function(e){
    $('.main_img img').attr('src', $(this).attr('src'));
});


Ответ 3

$('.img_list img').on('click', function(e){
    $(this).parents('.gallery').find('.main_img img').attr('src', $(this).attr('src'));
});
.img_list{
  display:flex;
}
.main_img img{
    width:60%;

}
.img_list img{
  width:20%;
  align-self:flex-start;
}