Question

所以，我可能会更好地尝试使用一种工作方法，但我决定自己动手 - 我正在使用WordPress并试图开发一种方式让文章弹出一个模态窗口点击。我得到了它的工作，但我不能让它为页面上的每个链接工作。这是我的代码：

$('.article-link').click(function() {
$('#article-pop').addClass('article-show').removeClass('article-hide');
$('#article-pop').load('<?php the_permalink(); ?>');
});

我的HTML随之而来：

<a href="#" title="<?php the_title_attribute(); ?>" rel="bookmark" class="article-link"><?php the_title(); ?></a>

关闭＆＃39;关闭＆＃39;选择其他地方：

<a href="#" id="article-close">Close</a>
<script>
$('#article-close').click(function() {
$('#article-pop').removeClass('article-show').addClass('article-hide');
});
</script>

作为参考，我的CSS：

#article-pop {
display:none;
position:absolute;
margin:20px auto;
padding:20px;
top:0;
max-width:600px;
background-color:white;
border-radius:7px;
box-shadow:0 0 0 1000px rgba(0, 0, 0, 0.5);
}

.article-show {
display:block !important;
}

.article-hide {
display:none;
}

#article-close {
display:block;
z-index:10;
}

我尝试在我的jQuery中添加.each选择器，但它返回错误。因为页面上有几篇文章，所以只打开第一篇，而不是像我希望的那样获得每篇文章的永久链接。

我希望这是有道理的 - 如果没有，我会尝试更具体。

Answer 1

我不熟悉wordpress，但如果在页面加载时动态生成链接，则单击jQuery中的触发器不会触发，因为动态生成的链接不会加载到DOM中。

$(document).on('click', '.article-link', function() {

如何定位每个链接并使其内容弹出模态窗口？

1 个答案: