在jQuery中单击类时removeClass（）

Question

重要编辑：

这个问题的根源是我在我的函数的一部分使用“$”而在其他部分使用“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选择器。之前由于转置错误而省略。*

我的问题：

单击上述课程时如何删除课程？

Answer 1

你错过了“。”在第一个处理程序？

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

Answer 2

你忘记了“。”在以下行：

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

Answer 3

而是可以尝试使用.toggleClass()尝试两件事：

$("body").on("click", '[class^="button"]', function(){
    $(this).toggleClass( "button_on button_off" );
});

A working demo in fiddle here

Answer 4

你不会选择什么选择器，你的意思是什么？“$（'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');

    });


});

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

此致

Answer 5

您可以按以下方式定位两个州（类），并根据当前班级更改班级。

此示例允许您根据需要包含更多功能。例如。你的警报。

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

Answer 6

在您的代码中：

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

Try in jsfiddle

Answer 7

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

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

你可以试试上面的代码