Jquery/Javascript Add class if X class is not exist

Question

I am new here, sorry if I do some mistake with this question. I have a HTML code.

<a href="#" id="foo" class="one">hit me</a>

with this function i can add class two in class one

$(document).ready(function () {
    $('a#foo').click(function(){
            $('.one').toggleClass('two'); 
        });
    });

but how if I want to add class two if class two is not exist and do other function if class two is exist? maybe like this,

<a href="#" id="foo" class="one">hit me</a>

i klik hit me and jquery is add class two,

<a href="#" id="foo" class="one two">hit me</a>

but when I klick hit me again, class two is not removed and because class is exist, i create other function based on class two is exist.

lets say like this,

i klik hit me

<a href="#" id="foo" class="one">hit me</a>
    <div id="blah" class=""*>lorem</div>

then

<a href="#" id="foo" class="one two">hit me</a>
<div id="blah" class=""*>lorem</div>

and klik hit me again.

<a href="#" id="foo" class="one two">hit me</a>
<div id="foo" class="blah2">lorem</div>

can you give me code or google suggest keyword or link, because I confused what i must search first.

thanks for adv, sorry for my Grammer, i cant speak/write English well, if any wrong grammer or language please correct me.

Answer 1

Using the hasClass() method and you're examples:

$(document).ready(function () {
    $('a#foo').click(function(){

      if ($(this).hasClass('two')) {
          $('#blah').addClass('blah2'); 
      } else {
          $(this).addClass('two'); 
      }

    });
});

Answer 2

Use jQuery hasClass method .

$(document).ready(function () {
    $('a#foo').click(function(){
        if ($(this).hasClass('two')) {
            doSomething();
        } else {      
            $('.one').addClass('two'); 
        }
    });
});

Answer 3

i'm a little confused as to what exactly you want to do, but I think you need to look into .hasClass() for starters.

$(document).ready(function () {
    $('a#foo').click(function(){
            if ($('.one').hasClass('two')) {
                // do stuff you want to do if element already has class "two"
            }
            else {
                // do stuff if it doesnt already have class "two"
            }
        });
    });

Answer 4

I am guessing at your exact needs, but I hope that my assumptions weren't too far off base.

Given HTML like this:

<a href="#" id="foo" class="one">hit me</a>
<div id="change" class="blah1"></div>

And JS Like this:

$(document).ready(function () {
    $('a#foo').click(function(e){
        e.preventDefault();
        var changeDiv = $('#change'); 
        if ($(this).hasClass('two')) {
            changeDiv.addClass('blah2').removeClass('blah1');
            changeDiv.html('<p>Blah 2</p>');
        } else {
            changeDiv.addClass('blah1').removeClass('blah2');
            changeDiv.html('<p>Blah 1</p>');
        }
        $('.one').toggleClass('two');
    });
});

You will be able to toggle your link's class and change or update another div based on the class of your link when clicked.

You can see this code working at http://jsfiddle.net/PTdLQ/4/

Answer 5

Another way to look at this is to check if the given class exists in the dom. Therefore, one can use the following:

$(document).ready(function () {

    $('a#foo').click(function(){

        if ($('.two').length) {

            //there is a class two
            SomeFunction();   
        } else {

            //there is no class two
            SomeOtherFunction();
        }
    });
});

Hope I typed it right

Answer 6

Use this code:

<script>
$(document).ready(function () {
    if(!$('#mydiv').hasClass('myclass')) {
          $('#mydiv').addClass('myclass'); 
      }
});
</script>