我正在动态地从数据库中获取超链接和段落,我希望隐藏/显示段落。如何使用jquery显示/隐藏特定链接的隐藏段落,而不是显示所有段落?
<body>
<a href="#">first link</a>
<p>Show this when I click first link</p>
<a href="#">second link</a>
<p>Show this when I click second link</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( "p" ).show();
});
</script>
</body>
答案 0 :(得分:2)
变化:
$( "a" ).click(function( event ) {
event.preventDefault();
$( "p" ).show();
});
为:
$( "a" ).click(function( event ) {
event.preventDefault();
$(this).next().show();
});
<强> jsFiddle example 强>
注意,如果您愿意,也可以使用.toggle()
代替.show()
在显示/隐藏之间切换。
答案 1 :(得分:0)
最简单的方法是为每个段落提供唯一的ID,并将其存储在链接中。像这样(fiddle here)
<强> HTML 强>
<a href="#" rel="p-1">first link</a>
<p id="p-1">Show this when I click first link</p>
<a href="#" rel="p-2">second link</a>
<p id="p-2">Show this when I click second link</p>
<强>的javascript 强>
$('a').on('click', function(e) {
e.preventDefault();
$('#'+$(this).attr('rel')).slideToggle();
});
其他选项可能是,例如find first child某种类型(例如p
或p
specific class)。无论如何找到你想要的元素suits you。最适合您的方式主要取决于您的网页结构。