jquery - 如何根据项目点击更改弹出图像

Question

我正在使用 loop 显示两个图像（来自数据库）。它显示得很好。单击第一个图像时，它会打开带有正确图像的弹出窗口，但是当我单击第二个按钮时，它仍然在弹出窗口中显示第一个图像。我该如何分别更改图像。图像和弹出图像来自数据库。我使用开发人员工具检查了我的代码，但仍然无法更改弹出图像。弹出功能可以正常打开和关闭，但它不会根据项目单击更改图像。

这是我用于显示图像和弹出窗口的 php 刀片。

<div class="row">
    @foreach($product->images as $Image)
        <div class="col sm-12 col-md-6 mb-3 open">
            <img class="mb-2 get-started" src="{{ $Image->url }}"/> 
        </div>          
        <div id="popup-container">
            <div id="popup-window">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
                <a href="#" class="your-class"></a>
            <div class="row">
            <img src="{{ $Image->pop_url }}"> 
            </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

我的jQuery

    $('.get-started').on('click', function() {
       var $sidenav, $this;
       $this = $(this);
       $sidenav = $('#popup-container');
       if ($this.hasClass('active')) {
          $this.removeClass('active');
          return $sidenav.removeClass('active');
       } else {
          $this.addClass('active');
          return $sidenav.addClass('active');
       }
    });
    $('.get-started').on('click', function() {
       var $sidenav, $this;
       $this = $(this);
       $sidenav = $('#popup-container');
       if ($this.hasClass('open')) {
          $this.removeClass('open');
          return $sidenav.removeClass('open');
       } else {
          $this.addClass('open');
          return $sidenav.addClass('open');

       }
    });
    $('#popup-container').find('.close').on('click', function() {
       $(this).parent().removeClass('open');
       $('.get-started').removeClass('open')
       return $('#popup-container').removeClass('open');
       return $('.get-started').removeClass('open');
    });

    $('#show').on('click', function() {
       $('.center').show();
       $(this).hide();
    });

    $('#close').on('click', function() {
       $('.center').hide();
       $('#show').show();
    })

标签： jquery