单击时应将缩略图图像与当前图像交换答案

【问题标题】：Thumbnail image should be swapped with the current image on click单击时应将缩略图图像与当前图像交换
【发布时间】：2017-09-22 13:37:59
【问题描述】：

我有一个 codepen 链接https://codepen.io/robgolbeck/pen/bVGmop，这与我想要的非常相似。我唯一想要的是，在点击拇指图像时，大图像应该被点击的拇指图像替换，并且它不应该出现在拇指列表中。总共只有 5 个图像应该轮流出现，而这里有 6 个（ 5+ 1 拇指重复）。我试图调整 JS，但它没有按预期工作。任何人都可以请帮忙。从早上开始就被这个问题困扰。提前致谢。

$('#thumbs img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $(this).attr('src',$('#largeImage').attr('src').replace('large','thumb'));
});

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

在#thumbs img的点击处理事件中，可以先显示所有图片，然后隐藏当前图片。首先，您可以触发点击第一张图片。

$('#thumbs img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs img').show();
  $(this).hide();
});
$('#thumbs img').first().trigger('click');

【讨论】：

非常感谢@Diij。此答案按预期工作。

【解决方案2】：

您可以简单地使用 jQuerys show() 和 hide() 方法。先显示#thumbs的所有子元素，然后用$(this).hide();隐藏当前点击的元素。

要最初隐藏第一张图片，可以使用$('#thumbs').children().first().hide();

$('#thumbs').children().first().hide();
$('#thumbs img').click(function() {
  $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs').children().show();
  $(this).hide();
});

#thumbs {
  padding-top: 10px;
  overflow: hidden;
}

#thumbs img,
#largeImage {
  border: 1px solid gray;
  padding: 4px;
  background-color: white;
  cursor: pointer;
}

#thumbs img {
  float: left;
  margin-right: 6px;
}

#description {
  background: black;
  color: white;
  position: absolute;
  bottom: 0;
  padding: 10px 20px;
  width: 525px;
  margin: 5px;
}

#panel {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
  <div id="panel">
    <img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_01_large.jpg" />
  </div>
  <div id="thumbs">
    <img src="http://robgolbeck.com/demos/image-swap/image_01_thumb.jpg" alt="1st image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_02_thumb.jpg" alt="2nd image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_03_thumb.jpg" alt="3rd image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_04_thumb.jpg" alt="4th image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_05_thumb.jpg" alt="5th image description" />
  </div>
</div>

【讨论】：

【解决方案3】：

我认为 jQuery 的 attr 方法引起了问题，请尝试使用 prop 方法，如下所示 sn-p ：

$('#thumbs img').click(function(){
   $('#largeImage').prop('src',$(this).prop('src').replace('thumb','large'));;
    $('#description').html($(this).prop('alt'));
});

【讨论】：

【解决方案4】：

$('#thumbs img').click(function(){

    $("#thumbs img").each(function(){$(this).show();});
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));

    $(this).hide();
});

【讨论】：