0

このコードを機能させることはできません:

$("a.expand_all").on("click",function(){
    $(this).text('Hide');
    $('.answer').each(function () {
        $(this).slideDown(150, function () {
            $(this).show();
        });
    });
}, function () {
    $(this).text('Expand');
    $('.answer').each(function () {
        $(this).slideUp(150, function () {
            $(this).hide();
        });
    });
});

複数の div を折りたたんで展開しようとしていますが、クリック イベントでは何も起こりません。私は最新のjQuery 1.10.1を使用しています

4

2 に答える 2

1

そこに2つの機能があるため、有効なイベントバインディングのようには見えません。

HTML - イベント委任用の div ラッパーを追加しました

<div class="expando_content">
<a class="expand_all" href="#">Expand</a>

    <p class="answer">I'm an answer!</a>
        <p class="answer">Another answer</a>
            <p>Dynamically added "expand more" goes below...it won't work :(</p>
            <div id="thing"></div>
        </p>
    </p>
</div>

JS - トグル機能を 1 つの関数内に移動しました。

$(".expando_content").on("click", ".expand_all", function () {

    if (!$('.answer').is(':visible')) {
        $(this).text('Hide');
        $('.answer').each(function () {
            $(this).slideDown(150, function () {
                $(this).show();
            });
        });
    } else {
        $(this).text('Expand');
        $('.answer').each(function () {
            $(this).slideUp(150, function () {
                $(this).hide();
            });
        });
    }
});

$('<a class="expand_all" href="#">expand more</a>').appendTo($('#thing'));

jsフィドル

于 2013-10-18T22:13:30.227 に答える
1

jQueryの.onメソッドを間違って使用しているようです。そのメソッドにはいくつかのオーバーロードがありますが、(賢明なことに) 2 つの関数を受け取るものはありません。

あなたが正しくやろうとしていることを理解していれば、<a>タグがクリックされたときにいくつかの回答要素を切り替えたいだけです。本当に必要なのは、答えが拡張されているかどうかを判断する何らかの方法を持つことです。これには複数の方法がありますが、データ要素を使用することにしました。

<a class="expand_all" href="#" data-collapsed="true">expand</a>
<p class="answer">I'm an answer!</a>
<p class="answer">Another answer</a>

次に、JavaScript を次のように単純化できます。

$('a.expand_all').on("click",function(){
    if( $(this).data('collapsed') ) {
        $(this).text('hide').data('collapsed','');
        $('.answer').slideDown(150);
    } else {
        $(this).text('expand').data('collapsed','true');
        $('.answer').slideUp(150);
    }
});

あなたの構造のいくつかも単純化しました。特に、あなたのコードでは:

$('.answer').each(function () {
    $(this).slideDown(150, function () {
        $(this).show();
    });
});

は.each不要です。jQuery メソッドを適用するだけで、基本的に を呼び出すことと同じ.eachです。を使用する必要はほとんどありません.each。したがって、これは次のように単純化されます。

$('.answer').slideDown(150, function () {
    $(this).show();
});

次に、開始前に要素を表示するため、2 回.slideDown呼び出す必要はありません。.showしたがって、コールバックを取り除くことができ、これらすべてを次のように単純化できます。

$('.answer').slideDown(150);

ここですべての動作を確認できます。

http://jsfiddle.net/Jammerwoch/sRnkw/5/

最後に、要素が動的に追加されているかどうかを尋ねた理由は、動的に追加されている場合、それらをアタッチする方法が機能しないためです。つまり、jQuery セレクターは 1 回実行され、新しい要素を追加しても再実行されません。だから、もっと賢くなる必要があります。これは上記の jsfiddle で説明されています。その点についてさらに説明が必要な場合はお知らせください。

于 2013-10-18T22:22:48.750 に答える