Смена изображений по клику jquery

224

15 февраля 2018, 13:35

Нужно чтобы было 2 больших изображения. Но после клика на одну из миниатюр, второе увеличенное изображение пропадает

$(document).ready(function() { 
  $('.slide__thumbnails .thumb').click(function() { 
 
    var imgThumb = $(this).attr('src'); 
    var oldImg = $('.full_img'); 
    var imgFull = $('<img class="full_img" src="' + imgThumb + '">'); 
    imgFull.hide(); 
    $('.full').prepend(imgFull); 
    imgFull.show(1); 
    oldImg.hide(1, function() { 
      $(this).remove(); 
    }); 
  }); 
}); 
$('thumb:first').click();

.thumb { 
  height: 100px; 
  width: auto; 
} 
 
.full_img { 
  height: auto; 
  max-width: 456px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="full"> 
</div> 
<img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="full_img"> 
</div> 
<!-- <a class="thumb_trigger" href="#"> --> 
<div class="slide__thumbnails"> 
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="thumb"> 
  <!-- </a> --> 
  <!-- <a class="thumb_trigger" href="#"> --> 
  <img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/lifestyle/2017/11/09/how-to-keep-cat-from-scratching-your-sofa-to-shreds/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1510172827500.jpg?ve=1&tl=1&text=big-top-image" alt="" 
    class="thumb"> 
 
  <div class="full"> 
  </div> 
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="full_img"> 
</div> 
<!-- <a class="thumb_trigger" href="#"> --> 
<div class="slide__thumbnails"> 
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="thumb"> 
  <!-- </a> --> 
  <!-- <a class="thumb_trigger" href="#"> --> 
  <img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/lifestyle/2017/11/09/how-to-keep-cat-from-scratching-your-sofa-to-shreds/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1510172827500.jpg?ve=1&tl=1&text=big-top-image" alt="" 
    class="thumb">

Answer 1

var oldImg = $('.full_img');

выбирает все элементы с классом full_img. И, соответственно,

oldImg.hide(1, function() {
  $(this).remove();
});

все их удаляет.

Нужно

var oldImg = $(this).closest('.slide__thumbnails').find('.full_img');

И вместо удаления и пересоздания элементов можно просто менять атрибут src.

A здесь

$('thumb:first').click();

пропущена точка в начале селектора.

$(document).ready(function() { 
  $('.slide__thumbnails .thumb').click(function() { 
 
  $('.slide__thumbnails .thumb').click(function(){ 
var imgThumb = $(this).attr('src'); 
var oldImg = $(this).closest('.slide__thumbnails').find('.full_img'); 
oldImg.attr('src', imgThumb); 
  }); 
  }); 
}); 
$('.thumb:first').click();

.thumb { 
  height: 100px; 
  width: auto; 
} 
 
.full_img { 
  height: auto; 
  max-width: 456px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!-- <a class="thumb_trigger" href="#"> --> 
<div class="slide__thumbnails"> 
<img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="full_img"> 
  
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="thumb"> 
  <!-- </a> --> 
  <!-- <a class="thumb_trigger" href="#"> --> 
  <img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/lifestyle/2017/11/09/how-to-keep-cat-from-scratching-your-sofa-to-shreds/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1510172827500.jpg?ve=1&tl=1&text=big-top-image" alt="" 
    class="thumb"> 
 
</div> 
<!-- <a class="thumb_trigger" href="#"> --> 
<div class="slide__thumbnails"> 
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="full_img"> 
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="thumb"> 
  <!-- </a> --> 
  <!-- <a class="thumb_trigger" href="#"> --> 
  <img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/lifestyle/2017/11/09/how-to-keep-cat-from-scratching-your-sofa-to-shreds/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1510172827500.jpg?ve=1&tl=1&text=big-top-image" alt="" 
    class="thumb"> 
</div>