Question

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

Answer 1

变化：

$( "a" ).click(function( event ) {
    event.preventDefault();
    $( "p" ).show();
});

为：

$( "a" ).click(function( event ) {
    event.preventDefault();
    $(this).next().show();
});

<强> jsFiddle example

注意，如果您愿意，也可以使用.toggle()代替.show()在显示/隐藏之间切换。

Answer 2

最简单的方法是为每个段落提供唯一的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。最适合您的方式主要取决于您的网页结构。

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

2 个答案: