1

次のコードがあります。

$('[class*="time-span"]').on('click', function () {
    var modelPanel = $('.model-detail-panel');
    modelPanel.clone().insertAfter('.timeline', this).slideToggle('fast', function () {
        console.log(this);
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);
    });
});

クローン部分はうまく機能しますが、'modelPanel' を DOM に 1 回だけ表示したい ([class*="time-span"] をクリックするたびに)。現時点では、すべての「タイムライン」クラスの後に複数回挿入されているため、挿入される div のインスタンスがかなり多くなります。

これをクリックごとに1回だけ挿入するにはどうすればよいですか?

ありがとう

4

4 に答える 4

1

:first セレクターを使用します。

$('[class*="time-span"]').on('click', function () {
    var modelPanel = $('.model-detail-panel');
    modelPanel.clone().insertAfter('.timeline:first', this).slideToggle('fast', function () {
        console.log(this);
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);
    });
});
于 2012-10-15T16:23:24.620 に答える
0

クラスを削除することでこれを行うことができます。クラスが削除された場合、クリックイベントは機能しません。または、これは一度だけ挿入されます。

$('[class*="time-span"]').on('click', function () {
    var modelPanel = $('.model-detail-panel');
    modelPanel.clone().insertAfter('.timeline', this).slideToggle('fast', function () {
        console.log(this);
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);

 $(this).removeClass("time-span");
    });
});
于 2012-10-15T16:24:50.937 に答える
0

おそらく、に基づいてクローンを作成しているためです.class。

class.model-detail-panelには複数の要素を含めることができるため、1 つだけでなく、すべての要素を複製しています。

他の属性に基づいて複製を試みます。

于 2012-10-15T16:19:57.080 に答える
0

.timelinejQuery は、ページ上で見つかっinsertAfterた のクラスを持つすべての要素に対して実行するため、後で挿入するよりも具体的にする必要があります。.timeline

1 か所にしかないセレクターを使用してみてください。

于 2012-10-15T16:22:19.347 に答える