jquery 无论单击的图像如何，单击仅加载第一张图像

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 class 在 dom 上不是唯一的，因此它选择与 class 匹配的第一个 dom 元素。要解决此问题，一种可能的解决方案是将您单击的元素保存在变量中：

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

jquery 无论单击的图像如何，单击仅加载第一张图像

jquery click only loads first image regardless of image clicked

jquery

jquery-hover