CODEWITHSUNDEEP
jquery
DavidPL
DavidPL

Reputation: 119

Check if nav has already class if not add one

I reached confusing point in my code. Here's the thing.

$(".main-menu").click(function(e) {
        e.preventDefault();

        $('nav').toggleClass("light-mode");

});

Basically I want to add to the click function ability: 1. Check if nav has already class "light-mode" if not, add one. 2. After user clicks second time the trigger which is ".main-menu" I want to delete added class "light-mode" so I want to more advance toggleClass.

edit: Thanks guys for Your effort. Still I dont have a complete solution of the thing I am trying to do. My English is not so well to describe myself clear enough. I have a "hamburger" menu which is a one click function - trigger to show overlayed menu, and hide it. But while I click on it I also have to add a class "light-mode" to my nav, and after second click the toggler I must remove this class no matter what. And the hard thing is that I dont know how to do it using this one .click function.

toggleClass works good, but if my nav on specific page section has already this class "light-mode", the toggleClass turns it back. So when the overlay menu shows up my nav don't have the class added. That's why I cant use just the toggler. Your examples are half good, but on second click they are not removing the class.

Upvotes: 1

Views: 133

Answers (3)

No one
No one

Reputation: 1140

If you want to make your own toggle class then you can easily use ternary operator for this..

$("nav").hasClass("light-mode") ? $("nav").removeClass("light-mode"):$("nav").addClass("light-mode");

In you click event function.

Edit

As you need to add class on first click on second class you need to remove Class. SO you need to use counter variable;

var clickcount = 0;
$(".main-menu").click(function(e) {
  if(clickcount === 0) {
    $("nav").addClass("light-mode");
     clickcount++;
  }
  else {
    $("nav").removeClass("light-mode");
    clickcount = 0;
  }
});

Upvotes: 0

paolobasso
paolobasso

Reputation: 2018

You will need .hasClass(), .addClass() and .removeClass().

Then:

$(".main-menu").click(function(e) {
  e.preventDefault();
  if ($('nav').hasClass("light-mode")) {
    $('nav').removeClass("light-mode");
  } else {
    $('nav').addClass("light-mode");
  }
});

Working DEMO.

$(".btn").click(function(e) {
  e.preventDefault();
  if ($('.example').hasClass("red")) {
    $('.example').removeClass("red");
  } else {
    $('.example').addClass("red");
  }
});
.example {
  width:200px;
  height:200px;
  background-color:blue;
}

.red {
  background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn">
Button
</button>

<div class="example"></div>

You could also build a small plugin (tutorial) to do this easily if you want to use it more times:

(function( $ ){
   $.fn.classToggler = function(classToCheck, classToAddOrRemove) {
    if ($(this).hasClass(classToCheck)) {
      $(this).removeClass(classToAddOrRemove);
  } else {
      $(this).addClass(classToAddOrRemove);
  }
   }; 
})( jQuery );

And:

$(".btn").click(function(e) {
  e.preventDefault();
  $('.example').classToggler("red", "red");
});

Updated DEMO.

(function( $ ){
   $.fn.classToggler = function(classToCheck, classToAddOrRemove) {
      if ($(this).hasClass(classToAddOrRemove)) {
    $(this).removeClass(classToAddOrRemove);
  } else {
    $(this).addClass(classToAddOrRemove);
  }
   }; 
})( jQuery );

$(".btn").click(function(e) {
  e.preventDefault();
  $('.example').classToggler("red", "red");
});
.example {
  width:200px;
  height:200px;
  background-color:blue;
}

.red {
  background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn">
Button
</button>

<div class="example"></div>

P.S. Since you are trying to build a "togler" you have to use .hasClass() because you need both .addClass() and .removeClass() inside the same .click() function and they would delete each other without an if statement.

Upvotes: 1

Steve Danner
Steve Danner

Reputation: 22158

I believe this is what you're after for adding a class if it doesn't exist.

UPDATE: no need to call hasClass.

       $('nav').addClass("light-mode");

2nd, you can call removeClass no matter what if you want to remove it...even if it doesn't exist, it is ok.

$('nav').removeClass("light-mode");

Upvotes: 0

Related Questions