使用Jquery隐藏动态生成的<p> </p>

时间:2013-11-03 20:16:15

标签: javascript jquery html

我正在动态地从数据库中获取超链接和段落,我希望隐藏/显示段落。如何使用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>

2 个答案:

答案 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某种类型(例如pp specific class)。无论如何找到你想要的元素suits you。最适合您的方式主要取决于您的网页结构。