0 
<script type="text/javascript">
$(document).ready(function(){
    $('.show').click(function(e){
        $(this).closest('.b').css('display','block');
        e.preventDefault;
    });
});
</script>

<style type="text/css">
.b{ display:none; }
</style>

<div class="a"><a href="#" class="show">show content 1</a></div>
<div class="b">content 1</div>

<div class="a"><a href="#" class="show">show content 2</a></div>
<div class="b">content 2</div>

<div class="a"><a href="#" class="show">show content 3</a></div>
<div class="b">content 3</div>

フィドルページ: http://jsfiddle.net/dus4a/3/

基本的に、リンクを押すと表示されるコンテンツが 3 つありますが、最も近いものが実行されません。何が問題なのか教えてもらえますか?

どうもありがとう

4

3 に答える 3

3

このコードを試して、

$('.show').click(function (e) {
    e.preventDefault();
    $(this).parent().next('.b').css('display', 'block');
});

http://jsfiddle.net/dus4a/1/

于 2013-07-22T11:22:56.760 に答える
2

これを試して

$(this).parent().next().css('display','block');
于 2013-07-22T11:20:42.177 に答える
1

jQueryメソッドは、DOM ツリー内の祖先を.closest()調べて、セレクターに一致する最初の要素を探します。つまり、親を探している場合にのみ機能します。このメソッドはメソッドと非常に似ていることに注意してください。どちらも親を検索しますが、セレクターに複数の要素が一致する場合、後者は複数の要素を返します。.closest().parents()

あなたの場合、両親ではなく兄弟を探します。次の兄弟を取得する最も簡単な方法は、.next()メソッドを使用することです。.next()セレクターの有無にかかわらず使用できることに注意してください。セレクターなしで使用すると、直後の兄弟が返されますが、セレクターを指定すると、セレクターに一致する最初の兄弟が返されます。

HTML コードをそのまま使用すると、.b各要素の隣に.aある要素 (リンクの親) に到達する方法は次のとおりです。

<script type="text/javascript">
$(document).ready(function(){
    $('.show').click(function(e){
        $(this).parent()   // Get the ".a" first
               .next('.b') // Get the next element after ".a" and that matches ".b" (could also be used without selector)
               .css('display','block');
        e.preventDefault;
    });
});
</script>

<style type="text/css">
.b{ display:none; }
</style>

<div class="a"><a href="#" class="show">show content 1</a></div>
<div class="b">content 1</div>

<div class="a"><a href="#" class="show">show content 2</a></div>
<div class="b">content 2</div>

<div class="a"><a href="#" class="show">show content 3</a></div>
<div class="b">content 3</div>

ここで、この正確なコードが実際に動作しているのを見ることができます: http://jsfiddle.net/YVNDy/6/

乾杯！

于 2013-07-22T11:48:22.680 に答える