0

我遇到了一个问题，如果我单击 HTML 元素并更改他的类，事件不会切换到新类。经过搜索我发现我必须使用 on() 和 stopPropagation()。

现在我看到那个事件是 switch，但是代码没有执行。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

您应该改用“toggleClass”api。

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

于 2013-06-06T12:18:08.920 回答
0

如果它只是打开和关闭，使用 toggleClass 可能会更好

切换类

于 2013-06-06T12:18:39.267 回答
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 可能没有正确绑定（那些元素在 wa run 时没有这个类）你假设 ro 像这样处理它：

$(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 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();
    });
}

jsFiddle

于 2013-06-06T12:29:46.543 回答