Question

我有以下jQuery代码，假设在单击时在类之间切换。代码适用于第一次单击，但是一旦我第二次单击同一个元素，它就永远不会切换到相反的类。我究竟做错了什么？

// enable on click
$('.disabled').click(function(event)
{
     $(this).removeClass("disabled").addClass("enabled");
     $(this).html("enabled");
});


// disable on click 
$('.enabled').click(function(event)
{
     $(this).removeClass("enabled").addClass("disabled");
     $(this).html("disabled");
});

Answer 1

试试这个：

$('.link').click(function(event)
{
    $(this).toggleClass('enabled').toggleClass('disabled')
});

确保.link以.enabled或.disabled

开头

Answer 2

如果要为将来的元素定义事件，则必须使用live方法。 bind方法仅将事件附加到与选择器匹配的当前元素

另一种方法：

// Select all elements which should be affected, attach a click function:
$(".enabled, .disabled").click(function(){
    var $this = $(this);
    $this.toggleClass("enabled disabled");     // Toggle class

    var isEnabled = $this.hasClass("enabled"); // Get toggle state
    if (isEnabled) {                           // Example
        $this.text("enabled");
    } else {
        $this.text("disabled");
    }
});

Answer 3

除了Lee Price的回答：

代码的实际问题是，在两个点击处理程序的创建时，“。hasabled”和“.disabled”仅存在于有限数量的元素中。一旦更改了一个元素的类，它就属于一个新类，但是单击处理程序仍然只处理这个新类的旧元素。

为了将事件绑定到“未来元素”，请查看.live（）（或jon 1.7+的.on（））

jQuery在类之间切换

3 个答案: