0

「ハイライト」の親にクリック イベントを追加しようとしています。クラスを正しく追加および削除しますが、close の addClass の後にクリック イベントが停止します。

$(function () {
    $(".open").click(function () {
        $('#rslide').animate({
            right: '-375px'
        }, 400);
        $(this).removeClass('open');
        $(this).addClass('close');
    });
    $(".close").click(function () {
        $('#rslide').animate({
            right: '0px'
        }, 400);
        $(this).removeClass('close');
        $(this).addClass('open');
    });
});
4

2 に答える 2

0

同じ要素で2つのクラスを使用するため、コードは冗長であり、「ライブ」イベントは必要ありません。

「ライブ」イベントを使用しないため、jqueryはセレクターの対象となる要素を更新しません。したがって、将来、元のセレクターと一致しない場合、クリックイベントは引き続き機能します。

$(".open").click(function(){
    alert("click!");
}).removeClass("open");

特定のケースでは、最初にすべての要素のセレクターが必要です。最初にすべての要素が開かれている場合は、ミックスインの場合は$（ "。open"）を使用し、$（ "。open、.close"）を使用します。 $（ "＃parent> article"）のようなより良いセレクターが確かにあるはずですそれについてあなたのhtmlをチェックしてください

ここではあなたのhtmlを取得しないので、それはミックスインだと思います、$（ "。open、.close"）

現在のクラスをチェックして別のアクションを実行する必要があります。jqueryget関数でクラスをチェックします

$(this).hasClass("open");

また

$(this).is(".open");

=>

$(".open, .close").click(function(){
    var isOpen = $(this).hasClass("open");

    if(isOpen) alert("opened!"); else alert("closed!");
});

現在のコードで：

$(".open, .close").click(function(){
    var $t = $(this);
    var isOpen = $t.hasClass("open");

    if(isOpen){
        $('#rslide').animate({right:-375},400);
        $t.removeClass('open').addClass('close');
    } else {
        $('#rslide').animate({right:0},400);
        $t.removeClass('close').addClass('open');
    }
});

しかし、それでもいくつかの冗長コードです。これをもっと単純化しましょう：

$(".open, .close").click(function(){
    var $t = $(this);
    var isOpen = $t.hasClass("open");
    $('#rslide').animate({right:(-375*isOpen)},400);
    $t.toggleClass('open').toggleClass('close');
});

トグルクラスは確かに素晴らしいものではありません。前にクラスをチェックする必要があります。削除してみてください

$(".open, .close").click(function(){
    var $t = $(this);
    var isOpen = $t.hasClass("open") * 1;
    var cls = ["open","close"];
    $('#rslide').animate({right:(-375*isOpen)},400);
    $t.removeClass(cls[!isOpen]).addClass(cls[isOpen]);
});
于 2013-02-22T18:00:44.950 に答える