How to handle class (made by jQuery) with jQuery?

Question

I'm new in jQuery. This time I tried to make a double-stage effect using jQuery.

For example, when you click the word, its color changed to red at first. And when you clicked it again, its color changed to blue.

So I used following code, but it doesn't work well.

$(document).ready(function () {
  $("p#origin").click(function () {
    $(this).css("color", "red");
    $(this).addClass("clicked");
  });

  $("p.clicked").click(function () {
    $(this).css("color", "blue");
  });
});

You can see the result at here

I also tried this.

var toggle = 0;
console.log("toggle", toggle);

$(document).ready(function () {
  if (toggle == 0) {
    $("p#origin").click(function () {
      $(this).css("color", "red");
      toggle = 1;
      console.log("toggle:", toggle);
    });
  } else {
    $("p#origin").click(function () {
      $(this).css("color", "blue");
      toggle = 0;
      console.log("toggle", toggle);
    });
  }
});

Above code result can be seen here. The variable toggle is set to 1, but it doesn't work.

Is my question delivered well...? I'm new here, so I don't know how the javascript code loaded. (I also need help to study about this...)

I hope any solution to make a double stage effect. (Could anyone fix my above 2 codes to work well?)

Possible duplicate of JQuery Click event not working after adding class using JQuery — Paul Roub
– Paul Roub, Commented Nov 12, 2015 at 3:01

Community · Accepted Answer · 2017-05-23 12:23:40Z

2

The problem is you are dealing with dynamic selectors, ie you want the events handled to change based on dynamic evaluation of the selector, in that case you need to use event delegation.

But in this case you don't need that, assuming at first the p#origin does not have blue color you can do something like

$(document).ready(function() {
  $("p#origin").click(function() {
    $(this).toggleClass("clicked").toggleClass('unclicked', !$(this).hasClass('clicked'));
  });
});

#origin.unclicked {
  color: blue;
}
#origin.clicked {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="origin">origin</p>

But if p#origin has blue color before the first click, then you can simplify it to

$(document).ready(function() {
  $("p#origin").click(function() {
    $(this).toggleClass("clicked");
  });
});

#origin {
  color: blue;
}
#origin.clicked {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="origin">origin</p>

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Nov 12, 2015 at 3:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jonathan Lam Over a year ago

Aww, I was just going to post this... Nice answer though.

Heedoo Over a year ago

The link is the thing I needed. And your additional answer is quite helpful my study. How could you design the double .toggleClass? Thank you for nice answer.

Arun P Johny Over a year ago

The toggleClass method allows chaining so it returns you can call them like that

Roko C. Buljan · Accepted Answer · 2015-11-12 03:18:52Z

Just an idea instead of using .class:

Loop an array of styles (you can use as many styles/steps you want)

var c = ["#000", "#f00", "blue"];

$("#origin").click(function(){
  c.push(c.shift());                 // Put first array color to last place
  $(this).css({color: c[0] });       // Always use the 0 key
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="origin">Click to Toggle Color</p>

If you want to change more than just a color:

var c = [
  {color:"#000",    background:"#ffe",    fontSize:16},
  {color:"fuchsia", background:"yellow",  fontSize:24},
  {color:"#1CEA6E", background:"#C0FFEE", fontSize:36}
];

$("#origin").click(function(){
  c.push(c.shift());
  $(this).css(c[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="origin">Click to loop styles</p>

Steven Na · Accepted Answer · 2015-11-12 03:29:26Z

0

I just modified some JavaScript code from you, simply.

    var $origin;
    $origin = $('#origin');
    return $origin.on('click', function() {
      if ($origin.hasClass('red')) {
        $origin.css('color', 'yellow');
        $origin.addClass('yellow');
        return $origin.removeClass('red');
      } else {
        $origin.css('color', 'red');
        $origin.addClass('red');
        return $origin.removeClass('yellow');
      }
    });

answered Nov 12, 2015 at 3:29

Steven Na

192 bronze badges

2 Comments

Heedoo Over a year ago

Thank you, I checked your code and it works well! Does return makes this magic?

Steven Na Over a year ago

No problem :-) happy day~

Collectives™ on Stack Overflow

How to handle class (made by jQuery) with jQuery?

3 Answers 3

3 Comments

Loop an array of styles (you can use as many styles/steps you want)

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Loop an array of styles (you can use as many styles/steps you want)

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related