jquery toggleClass 不工作

Question

我有两个 link，我想在点击任何 link 时切换它的 class。

我的link是

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

所以我想从 btn to btn active 更改为 class 我有这个代码

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

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

当它像下面这样时，这个工作正常

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

但是当我的第一个按钮像下面这样激活时

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

这没有用，但是当点击双

时给出 classes 如下所示

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

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

我只想点击任何 link， 1. 从旧 link 中删除所有 classes 并给旧 link class "btn" 2. 从点击的 link 中删除所有 classes 并给出 class "btn active"

如何解决这个问题？

Answer 1

您的 jQuery 选择器可能有问题。

您正在检测对所有带有 class "btn":

的锚标签的点击

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

但是您正在删除 class "btn"。如何检测未来的点击？答：他们不会。

请注意，无需在行

中指定两个 classes

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

看来您真的只想切换 active class，所以只需

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

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

Answer 2

您只需为当前点击的 link 切换 class，然后为所有 link 移除活动和焦点 class，如下所示：

$('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>

Answer 3

请更改 jquery 代码如下：

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

这对我有用。希望这有帮助:)

Answer 4

基本切换

下面的代码在您的按钮上切换 class active，这意味着当它不存在时它会添加它，当它存在时它会删除它：

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

演示

$(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>

只允许一个活动按钮

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

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

演示

$(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>

Answer 5

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

Answer 6

请在切换脚本之前使用以下代码。这将解决切换 class 问题。

$("YourToggleSeletor").unbind('click');

jquery toggleClass 不工作

jquery toggleClass not working

javascript

jquery

toggleclass

基本切换

演示

只允许一个活动按钮

演示