如果再次单击，javascript 不会 .toggleClass() 吗？

Question

对于这个问题，我已经用最简单的术语表达了这一点。

如果元素被点击，'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

谢谢!

Answer 1

由于您没有明确指定要如何限制函数被调用，让我们看一下两种可能性。

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

在这种情况下，您可以使用 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>