如何在单击时为单个幻灯片打开弹出窗口，而不是同时打开所有幻灯片？

Question

使用 php，我创建了几个弹出窗口，我希望在单击任何幻灯片的按钮后出现。模态（简化）看起来像这样

@foreach($products as $key => $product)
            <div class="popup">
              <div>content</div>
            </div>
@endforeach

之后会生成不同的产品幻灯片

@foreach($products as $key => $product)
            <div class="item">
              <div>content</div>
<span class="Open">Button</span>
            </div>
@endforeach

在此之后，我运行一个简单的脚本，在按钮单击时显示模式

$(document).on ('click','.Open', function () {
            $('.popup').removeClass('display-none').addClass('d-flex').hide().fadeIn();
        });

这部分有效，单击时会出现模态，但是，我的问题是所有模态同时出现。有没有办法让它在单击其按钮时只显示与特定产品相关联的模式，而不是全部显示？

非常感谢！

Answer 1

首先需要在弹出窗口和按钮之间创建链接，如下所示

@foreach($products as $key => $product)
            <div class="popup" id="popup{{$key}}">
              <div>content</div>
            </div>
@endforeach


@foreach($products as $key => $product)
            <div class="item">
              <div>content</div>
<span class="Open" data-id="{{$key}}">Button</span>
            </div>
@endforeach

现在您可以链接到按钮和弹出窗口

$(document).on ('click','.Open', function () {
var $el = $(this);

$('#popup'+$el.data('id')).removeClass('display-none').addClass('d-flex').hide().fadeIn();
        });

希望这会有所帮助