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

jQuery单击仅加载第一个图像，无论单击的图像如何

1 个答案: