[英]jQuery show unique popup for each link clicked
I have a series of links on my page, each link has a unique id: library_vid_link-UNIQUE_ID
. 我的页面上有一系列链接,每个链接都有一个唯一的ID:
library_vid_link-UNIQUE_ID
。 When clicked, I want to show a popup which shows information unique to that link. 单击后,我想显示一个弹出窗口,其中显示该链接的唯一信息。
For each link, I have a hidden popup, which, when clicked, the popup is displayed. 对于每个链接,我都有一个隐藏的弹出窗口,单击该弹出窗口将显示该弹出窗口。 The popup also has a unique id:
less_preview_popup-UNIQUE_ID
(the unique id for the link and popup both match). 弹出窗口还具有唯一的ID:
less_preview_popup-UNIQUE_ID
(链接和弹出窗口的唯一ID都匹配)。
Here is a sample of my html code: 这是我的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>
Here is the jquery i'm currently using: 这是我当前正在使用的jQuery:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
$('.lesson_preview_popup').css('top', '25%');
$('body').addClass('no-scroll');
});
The issue I'm having is that when I click on a link, ALL the popups show, not just the one that relates to the link clicked. 我遇到的问题是,当我单击链接时,将显示所有弹出窗口,而不仅仅是与单击的链接相关的弹出窗口。 Is there a way to target the popup that belongs to the link clicked?
有没有一种方法可以定位属于所单击链接的弹出窗口?
Use the data-attribute: 使用数据属性:
<a data-popup="lesson_preview_popup_801" ....
And 和
$("#"+$(this).data("popup")).show().css('top', '25%');
Using $(this).next()
instead, assumes that the div to show is the next sibling of the link 使用
$(this).next()
代替,假定要显示的div是链接的下一个同级
Change this: 更改此:
$('.lesson_preview_popup').css('top', '25%');
into this: 到这个:
$(this).next().css('top', '25%');
Alternatively , save the ID (eg 801) in a new attribute, like this: 或者 ,将ID(例如801)保存在新属性中,如下所示:
<a data-id="801" ...
Then, call the popup like this: 然后,像这样调用弹出窗口:
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');
});
Jquery .next()
select next sibling of element. jQuery
.next()
选择元素的下一个同级。 Use it like bottom example 像底部示例一样使用
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.