Question

我对这个问题用最简单的术语来说。

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

但是，如果该元素处于“活动状态”并且第二次点击该元素，则“活动”类不应“重新应用”（或再次调用）。

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

例如，点击按钮1并具有“有效”类 - ＆gt; doFunction;

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

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

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

谢谢！

Answer 1

由于您没有准确指定限制函数的调用方式，因此我们来看两种可能性。

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

在这种情况下，您可以使用jQuery＆＃39; .one()。

＆＃13;

$(".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!");
  }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

https://codepen.io/connexo/pen/PQVKNY?editors=1111

Answer 3

这个技巧可行（只需使用一个全局变量并保留最后一个活动项目的ID），

var last_act_id = 0;
$(".class").click(function(){
  if($(this).attr('id') != last_act_id) {
    last_act_id = $(this).attr('id');
    $('.class').removeClass('active');
    $(this).addClass('active');
    doFunction();
  }

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


});

演示： https://codepen.io/anon/pen/Nyovjr?editors=0001

Answer 4

只需检查该事件目标是否已经拥有该类。既然您正在使用jQuery，那么您可以执行类似

的操作

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

Answer 5

试试这个

$("#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!");
}

我希望它有所帮助

如果再次点击，javascript不会.toggleClass（）？

5 个答案: