javascript don'；t.toggleClass（）是否再次单击？

我用最简单的术语来回答这个问题

若单击元素，“活动”类将添加到元素中，“活动”类将从其他元素中删除

但是，如果元素是“活动”的，并且第二次单击它，“活动”类不应“重新应用”（或第二次调用）

例如，单击按钮1并具有“活动”类->Do功能时

if ( $(".active").is("#1") ) {
  doFunction();
}

第二次再次单击该元素时，即使该元素已处于“活动”状态，也会再次激发该函数。如果元素处于活动状态，并且第二次被单击，我不想再次调用这些函数。我怎样才能做到这一点

代码笔示例：

---

谢谢

只需检查该事件目标是否已具有该类。因为您使用的是jQuery，所以可以执行以下操作

if($('.selector').hasClass('active')) {
 $('.selector').removeClass('active')
} else {
$('.selector').addClass('active')
}

---

只需检查该事件目标是否已经具有该类。因为您使用的是jQuery，所以可以执行以下操作

if($('.selector').hasClass('active')) {
 $('.selector').removeClass('active')
} else {
$('.selector').addClass('active')
}

这个技巧会起作用（只需使用一个全局变量并保持最后一个活动项的id）

演示：

此技巧将起作用（只需使用一个全局变量并保留最后一个活动项的id）

演示：

试试这个

$("#1").click(function(){
 $('#2').removeClass('active');


if (!$("#1").hasClass('active')) {
   $("#1").addClass('active');
  doFunction();
}else{
  console.log("already clicked");
}
});

$("#2").click(function(){
   $('#1').removeClass('active');

    if (!$("#2").hasClass('active')) {
       $("#2").addClass('active');
      doFunction();
    }else{
      console.log("already clicked");
    }
});

function doFunction() {
  console.log("function fired!");
}

我希望它有帮助

试试这个

$("#1").click(function(){
 $('#2').removeClass('active');


if (!$("#1").hasClass('active')) {
   $("#1").addClass('active');
  doFunction();
}else{
  console.log("already clicked");
}
});

$("#2").click(function(){
   $('#1').removeClass('active');

    if (!$("#2").hasClass('active')) {
       $("#2").addClass('active');
      doFunction();
    }else{
      console.log("already clicked");
    }
});

function doFunction() {
  console.log("function fired!");
}

---

我希望它能有所帮助

因为您没有明确指定如何限制函数被调用，让我们看看两种可能性

第一种可能性：每个按钮，你可以点击激活和调用一些功能最多一次。之后，切换按钮将切换类，但不会再次调用其他函数

在这个场景中，您可以使用jQuery的

$（“.class”）.one（'click'，function（）{
$（'.class'）.not（this.removeClass（'active'）；
$（this.addClass（'active'）；
如果（$（“.active”）是（“#1”））{
doFunction（）；
}
如果（$（“.active”）是（“#2”））{
doFunction（）；
}
函数doFunction（）{
log（“函数已启动！”）；
}
});
.class{
填充：10px；
边界半径：5px；
背景:#392；
宽度：100px；
颜色：白色；
文本对齐：居中；
利润率：25px；
显示：内联块；
光标：指针；
}
.主动{
背景:#932；
}

按钮
另一个
由于您没有明确指定如何限制函数被调用，我们来看两种可能性

第一种可能性：每个按钮，你可以点击激活和调用一些功能最多一次。之后，切换按钮将切换类，但不会再次调用其他函数

在这个场景中，您可以使用jQuery的


$（“.class”）.one（'click'，function（）{
$（'.class'）.not（this.removeClass（'active'）；
$（this.addClass（'active'）；
如果（$（“.active”）是（“#1”））{
doFunction（）；
}
如果（$（“.active”）是（“#2”））{
doFunction（）；
}
函数doFunction（）{
log（“函数已启动！”）；
}
});
.class{
填充：10px；
边界半径：5px；
背景:#392；
宽度：100px；
颜色：白色；
文本对齐：居中；
利润率：25px；
显示：内联块；
光标：指针；
}
.主动{
背景:#932；
}

按钮
另一个
由于您在动态添加/删除类，正确的方法是使用事件委派，如下所示：

$(document).on('click', ".class:not(.active)", function(){
   $('.class').removeClass('active');
   $(this).addClass('active');
   console.log("click triggered!");
})

由于您正在动态添加/删除类，正确的方法是使用事件委派，如下所示：

$(document).on('click', ".class:not(.active)", function(){
   $('.class').removeClass('active');
   $(this).addClass('active');
   console.log("click triggered!");
})

什么是
。什么是（“#1”）
？@guradio元素ID用来区分它们并调用不同的函数。
。什么是（“#1”）
？@guradio元素ID用来区分它们并调用不同的函数。看看他的代码笔。我不相信这能解决问题。@cji750你是对的。我理解错了。更新了答案。看看密码笔看看他的密码笔。我不相信这能解决问题。@cji750你是对的。我理解错了。更新了答案。看看密码笔这个答案太棒了！谢谢你抽出时间，我真的很感激！flag变量对我来说最有意义！但有趣的是，看到人们如何以不同的方式处理它！再次感谢！这个答案太棒了！谢谢你抽出时间，我真的很感激！flag变量对我来说最有意义！但有趣的是，看到人们如何以不同的方式处理它！再次感谢！