CODEWITHSUNDEEP
javascriptjquery
John107
John107

Reputation: 2287

javascript don't .toggleClass() if clicked again?

I've put this in the simplest terms for this question.

if element is clicked, 'active' class is added to element, 'active' class is removed from other elements.

However, if the element is 'active' and it's clicked for a second time the 'active' class should not be "re-applied" (or called for a second time).

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

For example when button 1 is clicked and has the 'active' class -> doFunction; 

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

when it's clicked again, a second time, the function is fired again even though the element is already 'active'. If the element is active and is clicked a second time I don't want to call the functions again. How can I achieve this?

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

Thanks!

Upvotes: 1

Views: 700

Answers (5)

Naga
Naga

Reputation: 2168

This trick will work(just use one global variable and hold the last active item's 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!");
}


});

Demo: https://codepen.io/anon/pen/Nyovjr?editors=0001

Upvotes: 1

connexo
connexo

Reputation: 56773

Since you are dynamically adding/removing classes, the correct apporach is to use event delegation like this:

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

Upvotes: 2

cjl750
cjl750

Reputation: 4629

Since you didn't specify exactly how you want to limit the functions from being called, let's look at two possibilities.

First possibility: each button you can click to activate and call some function at most one time. After that, toggling buttons will toggle the classes but not calling the other function again.

In this scenario, you can use jQuery's .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>

Second possibility: when you click between buttons, the active state is toggled, but clicking a button that's already active won't keep running the other function. However, toggling away from a button and back to it will allow that button's function to run again.

In this case, you can set some kind of flag via a variable and then check the flag to see if you're allowed to run the other function again. Function runs, flag goes up. Different button gets clicked, flag goes back down.

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>

Upvotes: 2

Noriel
Noriel

Reputation: 218

Try this 

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

I hope it helps

Upvotes: 0

ispykenny
ispykenny

Reputation: 1

Just check to see if that event target has the class already. Since you're using jQuery you could do something like

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

Upvotes: 0

Related Questions