Javascript 单击时，缩略图应与当前图像交换

我有一个代码笔链接，这是非常类似于我想要的。我唯一想要的是，单击拇指图像时，大图像应替换为单击的拇指图像，并且它不应出现在拇指列表中。总共只有5个图像应轮流出现，而这里有6个（5+1个图像在拇指中重复出现）。我已经尝试过调整JS，但没有达到预期效果。谁能帮忙吗。从早上起就一直在处理这个问题。提前谢谢

JS

---

我认为jQuery的attr方法引起了问题，请尝试使用prop方法，如下面的代码片段所示：

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

---

在

#thumbs img

的click handler事件中，您可以首先显示所有图像，然后隐藏当前图像。要开始，您可以点击第一张图片

$('#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');

---

您可以简单地使用jquery和方法。首先显示

#thumbs

的所有子元素，然后使用

$（this.hide（））隐藏当前单击的元素

要最初隐藏第一个图像，可以使用
$（'#拇指'）.children（）.first（）.hide（）


$（“#拇指”）.children（）.first（）.hide（）；
$（“#拇指img”）。单击（函数（）{
$（'#largeImage'）.attr（'src'，$（this.attr（'src'））.replace（'thumb'，'large'））；
$（'#description'）.html（$（this.attr（'alt'））；
$（“#拇指”）.children（）.show（）；
$（this.hide（）；
});
#拇指{
填充顶部：10px；
溢出：隐藏；
}
#拇指img，
#大图像{
边框：1px纯色灰色；
填充：4px；
背景色：白色；
光标：指针；
}
#拇指img{
浮动：左；
右边距：6px；
}
#描述{
背景：黑色；
颜色：白色；
位置：绝对位置；
底部：0；
填充：10px 20px；
宽度：525px；
保证金：5px；
}
#面板{
位置：相对位置；
}
非常感谢@Diij。这个答案正如预期的那样有效。
$('#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');

$('#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();
});