0

Web サイトの一部のコンテンツを自動的に非表示にしてクリック時に表示する Javascript の for ループを作成しましたが、何らかの理由で、変数がループの最後で最も高い値を取得しています...

そう

for (var i = 1; i <= 5; i++) {
    $('.views-row-' + i + ' .faq_answer').hide();
    $('.views-row-' + i + ' .faq_more').click(function () {
        $('.views-row-' + i + ' .faq_answer').slideToggle();
    });
}

すべての.views-row .faq_answer要素は必要に応じて非表示になり、すべて.views-row .faq_moreにクリックハンドラーがあります。
しかし、何らかの理由で、slideToggle行はクラスのある行にのみ適用されますviews-row-6(そこにはありません)...

したがって、関数の i 変数はループのすべての値に適用されるわけではありません...
どうすればすべての値に適用できますview-row-xか?

4

4 に答える 4

3

クリック コールバックで $(this) を使用して要素を参照する必要があります。ここで、i は i の最後の値に等しくなります。

    $('.views-row-'+ i + ' .faq_more').click(function(){
        $(this).slideToggle();
    });
于 2013-02-07T14:32:58.110 に答える
1

Javascriptでは、変数は関数レベルのスコープを持っています。インタープリターは、すべての変数定義を関数の先頭に移動（巻き上げ）、そのようなスコープ内のどこでも使用可能な変数への参照を作成します。したがって、内部関数は外部関数（クロージャ）から変数にアクセスできます。ブロックレベルのスコープに慣れているすべての人にとっての1つの落とし穴は、このメカニズムにループカウンターを内部関数にバインドすることが含まれていることです。これは、内部関数の寿命が外部関数よりも長い場合の例です。

したがって、あなたの場合、コールバックが呼び出されると、セレクターは値がのループカウンターへの参照を取得します。つまり、バインド時の値ではなくバインドされます。i6ii

したがって、参照を渡す代わりに、外部関数の変数の値を内部関数に渡す必要があります。

$('.views-row-'+ i + ' .faq_more').click(
    // pass value of i into the handler, not i itself
    function(i){
         // return the result of invoking the handler 
         // so that we can apply the current value of i to this result
         // and bind the whole closure as a handler to the click event
         return function(e) {
             $('.views-row-'+ i + ' .faq_answer').slideToggle();
         } 
    }(i)

）;

于 2013-02-07T14:53:19.710 に答える
1

問題へのアプローチが間違っていると思います。ループ内で多数のイベント ハンドラーをバインドすることはお勧めできません。次のようなことを行う方がはるかに優れています。

$('.faq_answer').hide();

$('.faq_more').click(function(){
    $(this).parent().find('.faq_answer').slideToggle();
});

あなたのhtmlは次のようなものだと思います：

<div class="views-row-1">
    <a href="#" class="faq_more"></a>
    <div class="faq_answer"></div>
</div>
于 2013-02-07T14:34:25.607 に答える
0

変数の代わりに、i要素を照合する別の方法を見つけるのがおそらく最善です

for ( var i = 1 ; i <= 5; i++ ) {

    // faq_more elements have id 'more' + i
    // faq_more elements contain class faq_more
    // faq_answer elements have id 'answer' + i
    // faq_answer elements contain class faq_answer

    $( ".faq_more" ).hide();

    $( ".faq_more" ).click( function(){

        var id = $( this ).attr( "id" ).replace( "more", "answer" );
        $( "#" + id ).slideToggle();

    });
}
于 2013-02-07T14:53:47.957 に答える