0

だから私は.closest関数を使おうとして問題を抱えていたので、何か他のものを使いましたが、これは私を困惑させたので、それを理解しようとしました.

これはhtmlです：

 <div class="faqW">
        <div class="faqQues2"> the question goes here </div>
        <br/>
        <div class="faqAns2"> answere to faq question here.</div>
    </div><!-- faq wrap ender -->

これは答えを隠している CSS です (完了後に非表示にするために js に変更されます)

.faqAns2{
    background-color:#CC6;
    color:black;
        display:none;
}

これは、使用しようとしている jq imです。

var question = $('.faqQues');
var answer = $('.faqAns');
var question2= $('.faqQues2');

(結果なしでさまざまな試み)

1を試してください：

question2.click( function(){
    $(this).parent().next('.faqAns2').slideToggle(500); 
});

また

question2.click( function(){
    $(this).parent('.faqW').next('.faqAns2').slideToggle(500);  
});

2を試してください：

    question2.click( function(){
    $('.faqW',$(this)).closest('.faqAns2').slideToggle(500);    
});

3を試してください：

    question2.click( function(){
$(this).next('.faqAns2').slideToggle(500);  
});

.parent などの html を再配置するなど、さまざまな方法を試しましたが、役に立ちませんでした。

私が望んでいるのは、質問をクリックすると、最も近い回答がトグル表示されることです。

何が間違っているのかわかりません。

ありがとうございます。

4

3 に答える 3

1

'.closest(selector)' は祖先チェーンを上って、セレクターに一致する最初の祖先を見つけます。

.next(selector)次の要素を見て、セレクターに一致する場合にのみ次の要素を返します。どれだけ離れていても、セレクターに一致する次の要素を探しません。次の要素がセレクターに一致する場合にのみ、何かを返します。

質問から、保存 div で次の回答を取得するには、次のようにします。

.nextAll('.faqAns2')

nextAll は、jQuery オブジェクトの要素の後にあるセレクターに一致するすべての兄弟を取得します。

あなたの特定の問題については、これでうまくいくと思います：

question2.click( function(){
    $(this).nextAll('.faqAns2').slideToggle(500); 
});

または、HTML をより汎用的にする場合は、すべての質問と回答に同じ jQuery を使用できます。

<div class="faqW">
    <div class="faqQues"> the question goes here </div>
    <br/>
    <div class="faqAns"> answere to faq question here.</div>
</div><!-- faq wrap ender -->

そしてjQuery：

$('.faqQues').click(function() {
    $(this).nextAll('.faqAns').slideToggle(500);
});

各 Q&A ペアは独自の div に限定されているため、次のようにすることもできます。

$('.faqQues').click(function() {
    $(this).closest('.faqW').find('.faqAns').slideToggle(500);
});
于 2012-06-12T00:56:31.213 に答える
1

next は、指定された場合にセレクターに一致するすぐ次の兄弟のみを返すため、2 つの next 呼び出しを使用する必要があります。ここで、答えの div は、質問の後の 1 つの DOM ノードです。

question2.click( function(){
    $(this).next().next('.faqAns2').slideToggle(500);  
});​

DOM トラバーサル関数を詳しく見てみましょうhttp://api.jquery.com/category/traversing/

于 2012-06-12T01:00:32.120 に答える
1

親にトラバースすると.next()、要素の直接の兄弟に一致します。

あなたの子供を検索するには.faqWを使用できます。または、あなた.find()からの次の回答を検索するには、直接の兄弟を検索するだけでなく、一致した兄弟をすべて取得します。.faqQues2nextAll()

$.find() - http://jsfiddle.net/urLqE/ :

question2.click( function(){
    $(this).parent().find('.faqAns2').slideToggle(500); 
});

</p>

$.nextAll() - http://jsfiddle.net/urLqE/1/ :

question2.click( function(){
    $(this).nextAll('.faqAns2').slideToggle(500); 
});
于 2012-06-12T01:02:49.553 に答える