jquery click загружает только первое изображение независимо от того, какое изображение было нажато - PullRequest
Новая
       17

jquery click загружает только первое изображение независимо от того, какое изображение было нажато

0 голосов
/ 28 июня 2019

Я пытаюсь отобразить изображение в 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();
    });
    });

1 Ответ

0 голосов
/ 28 июня 2019

Поскольку после запуска этой строки: 

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

Класс .img-swap не является уникальным в dom, поэтому он выбирает элемент frist dom, соответствующий классу.Чтобы исправить это, одним из возможных решений является сохранение в переменной элемента, на который вы щелкнули: 

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