0

これがすでに投稿されている場合は申し訳ありませんが、私はそれらの多くを見て、解決策を得るためにそれらを使用しようとしましたが、どれも私のために働いていません.

これが私が正しいと思った方法です（私が行っていた他のコーディングなしで）。がF1トリガーされると、クリックを無効にする必要があります。IF2がトリガーされたら、有効にする必要があります。

1.

$('.head2, .head3').click(function(event) {
    var object = $(this).siblings('.head4');
    if (something) F1();
if (somethingelse)) F2();
    function F1() {
        object.siblings('.head3').children('.primary').off('click');
    }
    function F2() {
        object.siblings('.head3').children('.primary').on('click');
    }
});

問題: クリック イベント リスナーがオフになりません。

2.

$('.head2 li, .head3 li').click(function(event) {
    var object = $(this).parent().siblings('.head4');
    if (something) F1();
if (somethingelse)) F2();
    function F1() {
        object.siblings('.head3').children('.primary').off('click');
    }
    function F2() {
        object.siblings('.head3').children('.primary').on('click');
    }
});

問題:.primaryクリック イベント リスナーが再割り当てされない

3.

func = $('.head2 li, .head3 li').click(function(event) {
    var object = $(this).parent().siblings('.head4');
    if (something) F1();
if (somethingelse)) F2();
    function F1() {
        object.siblings('.head3').children('.primary').off('click');
    }
    function F2() {
        object.siblings('.head3').children('.primary').on('click', func);
    }
});

問題：ERROR: Uncaught TypeError: Object [object Object] has no method 'apply'

私がやっていることをより明確にするためにli、イベントハンドラーがアタッチされている一連の をオフにしようとしています。

例：

<ul class="head">
    <li class="sub1"></div>
    <li class="sub2"></div>
    <li class="sub3"></div>
</div>

のいずれかをクリックするとli、何かが発生し、.sub1クリック イベント ハンドラが削除されます。その後、li再度 EXCEPTのいずれかをクリックするとsub1、アクションが逆にsub1なり、再びクリック可能になります。

4

3 に答える 3

1

イベントの委任

$('body').on('click','li',function(){
//do the logic for all li elements
});

$('body').on('click','li.active',function(){
//do the logic for active buttons here
});

次に、li要素でアクティブなクラスを切り替えて、カスタムパーツを有効/無効にします。

そして、単一のイベントリスナーを使用すると、次のようなことができます

$('body').on('click','li',function(){
     //do common stuff
    if($(this).hasClass('active')){
      //do stuff
      }
    else{
      //do other stuff
      }
    });

どちらの場合も

$（elem）.toggleClass（'active'）;

カスタムパーツの実行を切り替えます

そしてあなたの場合：

$('.head2, .head3').click(function(event) {
    var object = $(this).siblings('.head4');
    if (something) object.siblings('.head3').children('.primary').addClass('active');
    if (somethingelse)object.siblings('.head3').children('.primary').removeClass('active');
});
于 2012-07-18T23:51:33.683 に答える
0

F1()3 つのハンドラーすべてで andを定義しF2()ていますが、それらを呼び出していないため、実行されません。それらを実行したい場合は、それらを呼び出す必要があります。 [編集 - OP はこの最初の問題を修正しました - 2 番目の問題はまだ残っています]。

F1()最初の 2 つのケースでは、関数はクリック ハンドラーを削除しますが、F2()イベント ハンドラー コールバックがないため、関数は新しい作業ハンドラーをインストールしないため、実際に達成しようとしていることがわかりません。の場合、コールバック関数はオプションではありません.on()。

委任されたイベント処理を使用するというアイデアは、おそらくここで最も簡単だと思います。

.head3 オブジェクトのイベント ハンドラーをインストールするときは、オブジェクトに直接インストールしないでください。代わりに、親オブジェクトにインストールしてください。次に、イベント ハンドラーを有効または無効にするために、ターゲット オブジェクトからクラスを追加または削除することができます。

// the click handlers for .head3 objects
// these will only fire if the .head3 object does not have the disabled class on it
$(document.body).on('click', '.head3:not(.disabled) > .primary', function() {
    // your .head3 click handler code goes here
});

// then, turn an event handler on or off, you just add or remove the disabled class
// from it
$('.head2, .head3').click(function(event) {
    var object = $(this).siblings('.head4');
    function F1() {
        object.siblings('.head3').children('.primary').addClass("disabled");
    }
    function F2() {
        object.siblings('.head3').children('.primary').removeClass("disabled");
    }
    if (something) F1();
    if (somethingelse) F2();
});

ここで、HTML を表示したり、実際に何をしようとしているのかを完全に説明したりしていませんが、これは一般的な考え方を示しています。

于 2012-07-18T23:19:16.610 に答える
0

jfriend00 と sabithpocker の継続的なサポートに感謝します。

変数funcを間違った場所に置いていました。リスナーではなく、関数と同じにします。

$('.head2 li, .head3 li').click(func = function(event) {
    var object = $(this).parent().siblings('.head4');
    if (something) F1();
if (somethingelse)) F2();
    function F1() {
        object.siblings('.head3').children('.primary').off('click');
    }
    function F2() {
        object.siblings('.head3').children('.primary').on('click', func);
    }
});
于 2012-07-18T23:43:08.630 に答える