jQuery 为单击的每个链接显示唯一的弹出窗口

Question

我的页面上有一系列链接，每个链接都有一个唯一的 ID：library_vid_link-UNIQUE_ID。单击时，我想显示一个弹出窗口，其中显示该链接独有的信息。

对于每个链接，我都有一个隐藏的弹出窗口，单击该弹出窗口时会显示该弹出窗口。弹出窗口还有一个唯一 ID：less_preview_popup-UNIQUE_ID（链接和弹出窗口的唯一 ID 都匹配）。

这是我的 html 代码示例：

<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>

<div class="lesson_preview_popup" id="lesson_preview_popup-801">
    THIS IS THE POPUP
</div>

<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>

<div class="lesson_preview_popup" id="lesson_preview_popup-802">
    THIS IS THE POPUP 2
</div>

这是我当前使用的 jquery：

jQuery('.library_vid_link').click(function( event ) {
    event.preventDefault();
    $('.lesson_preview_popup').css('top', '25%');
    $('body').addClass('no-scroll'); 
});

我遇到的问题是，当我单击链接时，会显示所有弹出窗口，而不仅仅是与单击的链接相关的弹出窗口。有没有办法定位属于点击链接的弹出窗口？

Answer 1

使用数据属性：

<a data-popup="lesson_preview_popup_801" ....

和

$("#"+$(this).data("popup")).show().css('top', '25%');

使用 $(this).next() 代替，假定要显示的 div 是链接的下一个兄弟

Answer 2

改变这个：

$('.lesson_preview_popup').css('top', '25%');

进入这个：

$(this).next().css('top', '25%');

或者，将 ID（例如 801）保存在新属性中，如下所示：

<a data-id="801" ...

然后，像这样调用弹出窗口：

jQuery('.library_vid_link').click(function( event ) {
    event.preventDefault();
    var thisId = $(this).attr("data-id"); //get "801"
    $('#lesson_preview_popup-' + thisId).css('top', '25%'); //construct the ID and call the popup by its ID
    $('body').addClass('no-scroll'); 
});

Answer 3

Jquery .next() 选择元素的下一个兄弟。像底部示例一样使用它

$('.library_vid_link').click(function( event ) {
    event.preventDefault();
    $(this).next().show().css('top', '25%');
    $('body').addClass('no-scroll'); 
});

$('.library_vid_link').click(function( event ) {
    //event.preventDefault();
    $(this).next().show().css('top', '25%');
    //$('body').addClass('no-scroll'); 
});

.lesson_preview_popup {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
    THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
    THIS IS THE POPUP 2
</div>