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

使用data-attribute：

<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>

jQuery显示每个链接点击

3 个答案: