[英]jQuery show unique popup for each link clicked
我的页面上有一系列链接,每个链接都有一个唯一的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');
});
我遇到的问题是,当我单击链接时,将显示所有弹出窗口,而不仅仅是与单击的链接相关的弹出窗口。 有没有一种方法可以定位属于所单击链接的弹出窗口?
使用数据属性:
<a data-popup="lesson_preview_popup_801" ....
和
$("#"+$(this).data("popup")).show().css('top', '25%');
使用$(this).next()
代替,假定要显示的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');
});
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.