在jQuery中单击类时删除类（） 重要编辑：

这个问题的根源是，我使用“$”作为函数的一部分，使用“jQuery”作为其他部分。它没有反映在提供的示例代码中，因为我没有直接转换代码，而是选择提供一个更简单的示例。经验教训：按原样发布代码。问题自我投票赞成删除。提供的答案虽然有用，但本质上展示了通过提供的代码示例（我误认为是错误的）实现已经可以实现的功能的替代方法

背景： 我有一个钮扣。当它被点击时，我需要删除我用来选择它的类

按钮“关闭”时为红色，“打开”时为绿色

问题: 该类不会被删除

我所尝试的： *编辑：上述代码经过编辑，包括“.”按钮的“.”关闭选择器。以前由于转置错误而省略*

我的问题: 单击所述类时如何删除该类？

您是否错过了第一个处理程序上的“.”

    $("body").on("click", ".button_off", function(){
    alert("Selected and new class applied.");
    $(this).removeClass( "button_off" );
    $(this).addClass( "button_on" );
});

//Target the button when clicked when on...
$("body").on("click", ".button_on", function(){
    alert("Unselected and new class removed.");
    $(this).removeClass( "button_on" );
    $(this).addClass( "button_off" );
});

如果这不起作用，你试过这样做吗

 $(".button_off").click(function(){
    alert("Selected and new class applied.");
    $(this).removeClass( "button_off" );
    $(this).addClass( "button_on" );
});

//Target the button when clicked when on...
$(".button_on").click(function(){
    alert("Unselected and new class removed.");
    $(this).removeClass( "button_on" );
    $(this).addClass( "button_off" );
});

您忘记了下一行的“.”：

$("body").on("click", ".button_off", function () { ...

---

相反，您可以使用

尝试做两件事。toggleClass（）

：

---

您不使用的选择器是什么，您使用“$（'body'）”是什么意思？，您需要使按钮上的选择器自行设置，以便按如下方式操作：

$(document).ready(funcntion(){

    $('.button-on').click(function(){

         $(this).removeClass( "button_on" );
         $(this).addClass( "button_off" );

    });


});

或者可以从Jquery对其使用Css

$(document).ready(funcntion(){

    $('.button-on').click(function(){

         $(this).css('background-color','red!important');

    });


});

并检查浏览器控制台以查看是否存在任何错误

---

关于，

您可以如下所示针对两种状态（类），并根据当前类更改类

此示例允许您在需要时包括进一步的功能。例如，您的警报

$(".button_on, .button_off").on("click", function(){
    var $me = $(this);
    if ($me.hasClass("button_on")) { 
        alert("Unselected and new class removed.");
        $me.removeClass( "button_on" );
        $me.addClass( "button_off" );
    } else {       
        alert("Selected and new class applied.");
        $me.removeClass( "button_off" );
        $me.addClass( "button_on" );
    }
});

更好的方法是，如果您只需要通过更改可使用的类来更改按钮的样式：

$(".button_on, .button_off").on("click", function(){
    $(this).toggleClass( "button_on button_off" );
});

在代码中：

$("body").on("click", "button_off", function(){
  ...
  ...
}

你错过了类名前的点（

）

请尝试使用以下代码：

$("body").on("click", ".button_off", function(){
    alert("Selected and new class applied.");
    $(this).removeClass("button_off");
    $(this).addClass("button_on");
});

//Target the button when clicked when on...
$("body").on("click", ".button_on", function(){
    alert("Unselected and new class removed.");
    $(this).removeClass("button_on");
    $(this).addClass("button_off");
});

---

您可以尝试上面的代码

您的html代码在哪里您错过了

$（“正文”）中的点。在（“单击”，“按钮关闭”，函数（）{

@clarus:请在您的问题中提到，您已在这些注释/答案之后更新了问题。否则，这些注释/答案对于新访问者来说将显得不合适！@AleksandrM-已更正，但这只是一个转置错误。使用两个处理程序更正后，问题仍然存在。这对我来说很好。已更正，但这是just出现转置错误。使用两个处理程序更正，问题仍然存在。已更正，但这只是一个转置错误。使用两个处理程序更正，问题仍然存在。这是有效的。我选择了第一个解决方案，因为我将添加事件和条件，而不是类切换。谢谢。抱歉，但我没有澄清我将添加events和条件，而不是类切换。换句话说，我需要处理程序分开。乔纳森的解决方案为我实现了这一点（选择的答案）。@ClarusDignus查看升级的答案和小提琴链接，这是一种较短的方法。

$("body").on("click", "button_off", function(){
  ...
  ...
}

$("body").on("click", ".button_off", function(){
    alert("Selected and new class applied.");
    $(this).removeClass("button_off");
    $(this).addClass("button_on");
});

//Target the button when clicked when on...
$("body").on("click", ".button_on", function(){
    alert("Unselected and new class removed.");
    $(this).removeClass("button_on");
    $(this).addClass("button_off");
});

$(".button_off").click(function(){
    $(this).addClass("button_on" );
    $(this).removeClass("button_off" );    
});

$(".button_on").click(function(){
    $(this).addClass("button_off" );
    $(this).removeClass("button_on" );    
});