Javascript jquery toggleClass 不工作

jquery toggleClass not working

提问by user3412718

i have two links and want to toggle its class when click on any link.

我有两个链接，想在点击任何链接时切换它的类。

my links are

我的链接是

<a id="single" class="btn" >
<a id="double" class="btn active">

so i want to change class from btn to btn activei have this code

所以我想改变班级，因为btn to btn active我有这个代码

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).removeClass('focus active');
       $(this).removeClass('active');
       $(this).toggleClass("btn active");
   });
});

I tried with this code because in some other javascript in my accpliceation is also adding these classes.

我尝试使用此代码，因为在我的 accpliceation 中的其他一些 javascript 中也添加了这些类。

this work fine when its like bellow

当它像波纹管时，这个工作正常

<a id="single" class="btn" >
<a id="double" class="btn active">

but when my first button is active like bellow

但是当我的第一个按钮像波纹管一样处于活动状态时

<a id="single" class="btn active" >
<a id="double" class="btn">

this did't work but give classes as bellow when click on double

这没有用，但是当点击 double 时给出如下课程

<a id="single" class="btn active" >
<a id="double" class="active">

this is strange cause its working when <a id="double"is active but did't work when <a id="single"is active.

这很奇怪，因为它在<a id="double"活动时工作但在<a id="single"活动时不起作用。

all i want to do is when click on any link, 1. remove all classes from old link and give old link class "btn" 2. remove all classes from clicked link and give class "btn active"

我想要做的就是当点击任何链接时，1. 从旧链接中删除所有类并给旧链接类“btn” 2. 从点击的链接中删除所有类并给类“btn active”

how to fix this?

如何解决这个问题？

回答by xxxmatko

You just need to toggle class for the current clicked link, and before that, remove active and focus class for all links, like this:

您只需要为当前单击的链接切换类，然后在此之前删除所有链接的活动和焦点类，如下所示：

$('a.btn').click(function(){
  $("a.btn").removeClass("active focus");
  $(this).toggleClass("active");
});

a.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="single" class="btn active">single</a>
<a id="double" class="btn">double</a>

回答by John Slegers

Basic toggling

基本切换

The following code toggles the class activeon your buttons, which means it adds it when it's not there and it removes it when it's there :

以下代码切换active按钮上的类，这意味着它在它不存在时添加它，并在它存在时删除它：

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).toggleClass("active");
   });
});

Demo

演示

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).toggleClass("active");
   });
});

body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="trupple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>

---

---

Allow only one active button

只允许一个活动按钮

If you want to have exactly one active button at all times, you should just remove the class activefrom ALL of your buttons and add it to the one clicked, which you could do like this :

如果您希望始终只有一个活动按钮，您应该active从所有按钮中删除该类并将其添加到单击的按钮中，您可以这样做：

$(document).ready(function(){
    $('a.btn').click(function(){
       $('.btn').removeClass("active");
       $(this).addClass("active");
   });
});

Demo

演示

$(document).ready(function(){
    $('a.btn').click(function(){
       $('.btn').removeClass("active");
       $(this).addClass("active");
   });
});

body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="tripple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>

回答by cssyphus

Your jQuery selector may be the problem.

您的 jQuery 选择器可能是问题所在。

You are detecting the click on all anchor tags with class "btn":

您正在检测对“btn”类的所有锚标记的点击：

$('a.btn').click(function(){

But then you are removing class "btn". How can future clicks be detected? Answer: they won't.

但是你正在删除类“btn”。如何检测未来的点击？回答：他们不会。

Note that it is not necessary to specify both classes in the line

请注意，不必在行中指定两个类

$(this).toggleClass("btn active");

It appears that you really only want to toggle the activeclass, so just do

看来您真的只想切换active课程，所以就这样做

$(this).toggleClass("active");

Also, I find it most useful to specify exactly what I want added/removed at any given time. In other words, I try only to use addClass()and removeClass(), rather than toggleClass(). It requires more code, but it is more safe.

此外，我发现在任何给定时间准确指定我想要添加/删除的内容最有用。换句话说，我只尝试使用addClass()and removeClass()，而不是toggleClass(). 它需要更多的代码，但更安全。

回答by Hardipsinh Jadeja

Please change jquery code as follows :

请按如下方式更改 jquery 代码：

$(document).ready(function(){
    $('a.btn').click(function(){
        $(this).toggleClass("btn btn active");
   });
});

This works for me. hope this helps :)

这对我有用。希望这可以帮助 ：）

回答by song wang

$("a.btn").on("click", function() {
   $(this).toggleClass("active");
   $(this).siblings().toggleClass("active");
  });