如果再次单击,javascript 不会 .toggleClass() 吗?

约翰107

对于这个问题,我已经用最简单的术语来说明了。

如果单击元素,则将 'active' 类添加到元素,从其他元素中删除 'active' 类。

但是,如果元素是“活动的”并且第二次单击它,则不应“重新应用”(或第二次调用)“活动”类。

$(".class").click(function(){
  $('.class').not(this).removeClass('active');
  $(this).addClass('active');
}

例如,当单击按钮 1 并具有“活动”类 -> doFunction;

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

当再次单击它时,即使该元素已经处于“活动状态”,该函数也会再次触发。如果该元素处于活动状态并再次单击,我不想再次调用这些函数。我怎样才能做到这一点?

Codepen 示例:https ://codepen.io/anon/pen/yvZXOB ? editors = 1111

谢谢!

cjl750

由于您没有具体指定如何限制函数被调用,让我们看看两种可能性。

第一种可能性:您可以单击每个按钮以激活并最多调用一次某些功能。之后,切换按钮将切换类,但不会再次调用其他函数。

在这种情况下,您可以使用 jQuery 的.one().

$(".class").one('click', function(){
  $('.class').not(this).removeClass('active');
  $(this).addClass('active');


  if ( $(".active").is("#1") ) {
    doFunction();
  }
  if ( $(".active").is("#2") ) {
    doFunction();
  }
  function doFunction() {
    console.log("function fired!");
  }
});
.class {
  padding: 10px;
  border-radius: 5px;
  background: #392;
  width: 100px;
  color: white;
  text-align: center;
  margin: 25px;
  display: inline-block;
  cursor: pointer;
}

.active {
  background: #932;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class" id="1">
  button
</div>

<div class="class" id="2">
  another
</div>

第二种可能性:当您在按钮之间单击时,会切换活动状态,但单击已经处于活动状态的按钮不会继续运行其他功能。但是,从按钮切换回按钮将允许该按钮的功能再次运行。

在这种情况下,您可以通过变量设置某种标志,然后检查标志以查看是否允许您再次运行其他函数。函数运行,标志上升。单击不同的按钮,标志返回。

var preventFunction;

$(".class").on('click', function(){
  if($(this).hasClass('active')) {
    preventFunction = true;
  } else {
    preventFunction = false;
  }
  
  $('.class').not(this).removeClass('active');
  $(this).addClass('active');
  

  if ( $(".active").is("#1") ) {
    if(preventFunction !== true) {
      doFunctionOne();
    } 
  }
  if ( $(".active").is("#2") ) {
    if(preventFunction !== true) {
      doFunctionTwo();
    } 
  }
});

function doFunctionOne() {
  console.log("function one fired!");
  preventFunctiong = true;
}
function doFunctionTwo() {
  console.log("function two fired!");
  preventFunction = true;
}
.class {
  padding: 10px;
  border-radius: 5px;
  background: #392;
  width: 100px;
  color: white;
  text-align: center;
  margin: 25px;
  display: inline-block;
  cursor: pointer;
}

.active {
  background: #932;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class" id="1">
  button
</div>

<div class="class" id="2">
  another
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

toggleClass不会更改类

来自分类Dev

如果再次单击活动链接,则删除活动班级吗?

来自分类Dev

再次单击时,javascript autoclick循环不会重置

来自分类Dev

在Javascript中,“ for ... in”不会迭代原型的属性吗?

来自分类Dev

我的Javascript贴图不会绘制吗?

来自分类Dev

在Javascript中,“ for ... in”不会迭代原型的属性吗?

来自分类Dev

单击元素后禁用.toggleClass

来自分类Dev

内容内的聚合物单击事件不会触发吗?

来自分类Dev

单击按钮时按钮的颜色不会改变吗?

来自分类Dev

Javascript:当用户再次进入同一页面时,不会重发Json文件吗?

来自分类Dev

如果Linp因Linp失败而不会运行任务吗?

来自分类Dev

框架不会显示吗?

来自分类Dev

OpenLayers不会缩小吗?

来自分类Dev

Onchange不会开火吗?

来自分类Dev

循环不会终止吗?

来自分类Dev

slideToggle和toggleClass一起工作吗?

来自分类Dev

slideToggle和toggleClass一起工作吗?

来自分类Dev

slideToggle和toggleClass不能一起使用吗?

来自分类Dev

Javascript函数不会在返回时中断吗?

来自分类Dev

Javascript-计数变量永远不会达到0吗?

来自分类Dev

JavaScript字符串不会转换为HTML对象吗?

来自分类Dev

单击n个<div>元素的toggleClass

来自分类Dev

单击特定的div区域时防止toggleClass

来自分类Dev

toggleClass不保留先前的单击事件jQuery

来自分类Dev

jQuery toggleclass和单击不起作用

来自分类Dev

如果已经有 API 调用正在进行,如何确保我不会再次调用我的 API(通过单击按钮)?

来自分类Dev

Javascript通过单击我的按钮来更改我的对象的值,但再次单击时,它不会切换回来

来自分类Dev

Javascript / jQuery将toggleClass限制为4

来自分类Dev

循环不会退出循环吗?

Related 相关文章

  1. 1

    toggleClass不会更改类

  2. 2

    如果再次单击活动链接,则删除活动班级吗?

  3. 3

    再次单击时,javascript autoclick循环不会重置

  4. 4

    在Javascript中,“ for ... in”不会迭代原型的属性吗?

  5. 5

    我的Javascript贴图不会绘制吗?

  6. 6

    在Javascript中,“ for ... in”不会迭代原型的属性吗?

  7. 7

    单击元素后禁用.toggleClass

  8. 8

    内容内的聚合物单击事件不会触发吗?

  9. 9

    单击按钮时按钮的颜色不会改变吗?

  10. 10

    Javascript:当用户再次进入同一页面时,不会重发Json文件吗?

  11. 11

    如果Linp因Linp失败而不会运行任务吗?

  12. 12

    框架不会显示吗?

  13. 13

    OpenLayers不会缩小吗?

  14. 14

    Onchange不会开火吗?

  15. 15

    循环不会终止吗?

  16. 16

    slideToggle和toggleClass一起工作吗?

  17. 17

    slideToggle和toggleClass一起工作吗?

  18. 18

    slideToggle和toggleClass不能一起使用吗?

  19. 19

    Javascript函数不会在返回时中断吗?

  20. 20

    Javascript-计数变量永远不会达到0吗?

  21. 21

    JavaScript字符串不会转换为HTML对象吗?

  22. 22

    单击n个<div>元素的toggleClass

  23. 23

    单击特定的div区域时防止toggleClass

  24. 24

    toggleClass不保留先前的单击事件jQuery

  25. 25

    jQuery toggleclass和单击不起作用

  26. 26

    如果已经有 API 调用正在进行,如何确保我不会再次调用我的 API(通过单击按钮)?

  27. 27

    Javascript通过单击我的按钮来更改我的对象的值,但再次单击时,它不会切换回来

  28. 28

    Javascript / jQuery将toggleClass限制为4

  29. 29

    循环不会退出循环吗?

热门标签

归档