0

データベースからハイパーリンクと段落を動的に取得しています。段落を非表示/表示したいと考えています。すべての段落を表示する代わりに、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>
4

2 に答える 2

2

変化する：

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

に：

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

jsFiddle の例

.toggle()必要に応じて、代わりに を使用して表示/非表示を切り替えることもできます.show()。

于 2013-11-03T20:19:02.277 に答える
0

最も簡単な方法は、各段落に一意の ID を与え、それをリンクにも保存することです。このように（ここでフィドル）

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();
});

他のオプションは、たとえば、特定の型 (たとえば、 a 、または特定のクラスを持つ a )の最初の子を見つけることです。どんな方法でも、自分に合った要素を見つけることができます。最も適切なものは、ほとんどの場合、ページの構造によって異なります。 pp

于 2013-11-03T20:26:09.937 に答える