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

我的页面上有一系列链接，每个链接都有一个唯一的id:

library\u vid\u link-unique\u id

。单击时，我想显示一个弹出窗口，显示该链接特有的信息

对于每个链接，我都有一个隐藏的弹出窗口，单击该窗口时，将显示弹出窗口。弹出窗口还有一个唯一id:

less\u preview\u popup-unique\u 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>

我遇到的问题是，当我点击一个链接时，所有的弹出窗口都会显示出来，而不仅仅是与点击的链接相关的弹出窗口。是否有方法指向所单击链接的弹出窗口？

更改此选项：

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

---

使用数据属性：

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

改为使用

$（this）.next（）

，假设要显示的div是链接的下一个同级元素

Jquery选择元素的下一个同级元素。像下面的例子一样使用它

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

$（'.library\u vid\u link'）。单击（函数（事件）{
//event.preventDefault（）；
$（this.next（）.show（）.css（'top'，'25%）；
//$（'body'）.addClass（'no-scroll'）；
});
。课程预览\u弹出窗口{
显示：无；
}

这是弹出窗口
这是弹出窗口2
假设div是下一个同级。使用数据属性是我的建议，为了使其生效，div必须是link的下一个同级。有更好的解决方案，而不是添加新属性。但是添加数据属性比使用更安全。next（）是的，我喜欢这个答案-很好，很简单，这正是我所需要的。在link之后总是有弹出元素吗？
$("#"+$(this).data("popup")).show().css('top', '25%');

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