3

クリックするとクラスを「.off」から「.on」に変更する2つのリスト項目があります。一度に1つの要素のみを「.on」にする必要があるため、一方がすでにオンになっていてもう一方がクリックされると、両方の要素がクラスを「.off」から「.on」に、またはその逆に変更する必要があります。クラスが「.on」のリストアイテムをクリックすると、クラスが「.off」に変更されます。

私が抱えている問題は、クラス「.on」のリストアイテムがクリックされたときに、クラスが「.off」であるかのようにクリック機能を実行することです。

私のhtml：

<ul>
    <li><a href="about" class="off">ABOUT</a></li>
    <li><a href="upload" class="off">SUBMIT</a></li>
</ul>

私のJavaScript（jQuery 1.7.1で実行）

$('.off').click(function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$('.on').click(function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

ここで何が起こっているのか誰か知っていますか？私のコードに何か問題がありますか、それともここで何らかのバグに遭遇しましたか？

http://jsfiddle.net/ZC3CW/6/

4

5 に答える 5

4

を使用してイベントをバインドするために使用しているセレクターはclick()、イベントハンドラーを追加する要素を選択するために使用されます。ハンドラーの実行時には、セレクターは考慮されません。

あなたはこのようなものをもっと探しているはずです：

$('li').click(function(event) {
    event.preventDefault();

    if ($(this).hasClass('off')) {
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
    } else { // $(this).hasClass('on');
        $(this).addClass("off").removeClass("on");
    }
});

またはのliにクラス/IDを追加して、セレクターをより明示的にしたい場合があります。ulli

さらに混乱させるために、これを行うこともできます（jQuery> 1.7を使用している場合）。

$(document).on('click', '.off', function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$(document).on('click', '.on', function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

これは、.on()関数が選択された要素（）にイベントハンドラーをアタッチすることによって機能し、イベントの発生元の要素がイベント時にセレクターと一致する場合にdocumentのみ、指定されたイベント（）でハンドラー（関数）を実行するためです。拘束時ではなく、解雇された。click.off

于 2012-01-27T15:55:21.237 に答える
2

別のセレクターにクリックハンドルを追加することをお勧めします。これでうまくいくはずです...

$("ul li a").click(function(e){
   e.preventDefault();

   if($(this).hasClass("off")){
      $("ul li a").addClass("off").removeClass("on");
      $(this).addClass("on").removeClass("off");
   }
   else{
      $(this).addClass("off").removeClass("on");
   }
});
于 2012-01-27T15:57:55.213 に答える
1

問題は、jQueryハンドラーがページの読み込み時にアタッチされ、クラスを変更しても同じままであるということです。click（）の代わりにlive（'click'、handler） on（'click'、handler）を使用します。

編集：.live（）がjQuery1.7で非推奨になっていることに気づきました。

于 2012-01-27T15:56:00.957 に答える
0

私が見ている問題は、クリックイベントの時点で「on」クラスが機能していないため、$('.on').clickメソッドが呼び出されないことです。

クラスを変更した後、イベントを再割り当てしてみてください（例は次のとおりです）：

var assignClicks = function () {
    $('.off').click(function(event) {
        event.preventDefault();
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
        assignClicks();
    });
    $('.on').click(function(event) {
        event.preventDefault();
        $(this).addClass("off").removeClass("on");
        assignClicks();
    });
};
assignClicks();

お役に立てれば、

ピート

于 2012-01-27T16:00:53.297 に答える
0

クリックはクラスではなく要素にバインドされます。たぶんあなたはイベントをに添付することができます

  • 要素と要素クラスの検出/切り替え：

    $('li').click(function(event) {
    event.preventDefault();
    if( $(this).hasClass('on') ) {
        $(this).removeClass('on');
    }
    else {
        $(this).addClass('on');
        $(this).siblings().removeClass('on');
    }
});
    • 于 2012-01-27T16:25:55.430 に答える