0

HTML 要素をクリックしてクラスを変更すると、イベントが新しいクラスに切り替えられないという問題に直面しました。検索した結果、on() と stopPropagation() を使用する必要があることがわかりました。

イベントが切り替えられていることがわかりましたが、コードは実行されていません。firebug のイベント ビューアは、どの要素がクリック イベントを使用しているかを示します。この行をクリックすると、firebug が点滅します。イベントは機能しているように見えますが、コードが実行されないのはなぜですか?

  $(function(){
  $(".on").on("click",function(e){
  $(this).attr("class","off").html("off");
  e.stopPropagation();
  });

  $(".off").on("click",function(){
  $(this).attr("class","on").html("on");

   });

});

html はクリックするだけで簡単にオンにできます。「オフ」に変更してから (クリックして) 戻す必要があります。

4

5 に答える 5

0

このように多分：

http://jsfiddle.net/LrGmH/

$(function () {
    $(document).on("click",".on,.off", function (e) {
        $(this).toggleClass("on off").html($(this).attr('class'));
        e.stopPropagation();
    });
});
于 2013-06-06T12:22:11.357 に答える
0

Off は適切にバインドされていない可能性があります ( on wa run の場合、これらの要素にはこのクラスがありません)。次のように処理するとします。

$(function() {

  $(".parentOfOn").delegate('.on',"click",function(e){
  $(this).attr("class","off").html("off");
  e.stopPropagation();
  });

  $(".parentOfOff").delegate('.off',"click",function(){
  $(this).attr("class","on").html("on");

   });


});
于 2013-06-06T12:27:27.540 に答える
0

オンとオフだけの場合は、toggleClass を使用する方が良いかもしれません

トグルクラス

于 2013-06-06T12:18:39.267 に答える
0

他の人が言ったように、おそらくtoggleClass APIを使用したほうがよいでしょう。

関数が最初に呼び出されたときに $(".0ff") が有効なオブジェクトを返さないため、クリック ハンドラーが正しく適用されないため、元のコードが機能していないと思います。次のように、オン状態のクリック関数内でオフ クリック ハンドラーを移動してみてください。

編集 1: 元のコードが正しく機能していませんでした。コードを更新し、jsfiddle を提供しました。

$(function(){
  bindOnClick();
});


function bindOnClick(){
    $(".on").on("click",function(e){
        $(".on").unbind("click");
        $(this).attr("class","off").html("off");
        bindOffClick();

        e.stopPropagation();
    });
}

function bindOffClick(){
    $(".off").on("click",function(){
        $(".off").unbind("click");
        $(this).attr("class","on").html("on");
        bindOnClick();
        e.stopPropagation();
    });
}

jsフィドル

于 2013-06-06T12:29:46.543 に答える
0

代わりに「toggleClass」API を使用する必要があります。

http://api.jquery.com/toggleClass/

于 2013-06-06T12:18:08.920 に答える