jquery click 只加载第一张图片，不管点击的是什么图片

Question

我正在尝试根据单击的缩略图在 div 中显示图像。我有两种尺寸，小号和大号，想在 div 中显示大号版本。我已经根据其他答案尝试了一些代码修改，但我没有进一步前进（这些在我的代码中被注释掉了）。

我制作了一个JSfiddle 来显示问题。

谁能帮我找到解决办法？

HTML 和 JS：

    <div class="banner_slide clearfix">
    <ul>
    <li class="link"><img class="img-swap thumb-img" src="https://www.ryokuyou.co.jp/wp2/wp-content/uploads/2019/06/m01_hyoushi_small.jpg" /><div class="tridown"></div></li>
    <li class="link"><img class="img-swap thumb-img" src="https://www.ryokuyou.co.jp/wp2/wp-content/uploads/2019/06/m01_honbun_small.jpg" /><div class="tridown"></div></li>
    <li class="link"><img class="img-swap thumb-img" src="https://www.ryokuyou.co.jp/wp2/wp-content/uploads/2019/06/m01_tojikata_small.jpg" /><div class="tridown"></div></li>
    <li class="link"><img class="img-swap thumb-img" src="https://www.ryokuyou.co.jp/wp2/wp-content/uploads/2019/06/m01_sabisu_small.jpg" /><div class="tridown"></div></li>
    </ul>
    <img id="banner-img" src="https://www.ryokuyou.co.jp/wp2/wp-content/uploads/2019/06/m01_sabisu_large.jpg" />
    </div>

    $(".img-swap").click(function () {
    var source = $(this).attr("src");
    $("#banner-img").fadeOut(function () {
    //$(this).attr("src", source); 
    $(this).attr("src", $(".img-swap").attr("src").replace("small", "large"));
    //$("#banner-img").attr("src", $(this).attr("src").replace("small", "large"));
    $(this).fadeIn();
    });
    });    

Answer 1

因为一旦你触发了这一行：

$(this).attr("src", $(".img-swap").attr("src").replace("small", "large"));

.img-swap 类在 dom 上不是唯一的，因此它会选择与该类匹配的第一个 dom 元素。要解决此问题，一种可能的解决方案是将您单击的元素保存在变量中：

$(".img-swap").click(function () {
    var source = $(this).attr("src");
    $("#banner-img").fadeOut(function () {
      $(this).attr("src", source.replace("small", "large"));
      $(this).fadeIn();
    });
  });