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](http://stackoverflow.com/questions/16893043/jquery-click-event-not-working-after-adding-class-using-jquery) — Paul Roub, Nov 12 '15 at 03:01

score 2 · Accepted Answer · edited May 23 '17 at 12:23

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>

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. — Heedoo, Nov 12 '15 at 04:17
The `toggleClass` method allows chaining so it returns you can call them like that — Arun P Johny, Nov 12 '15 at 04:18

Roko C. Buljan · Answer 2 · 2015-11-12T03:18:52.163

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>

score 0 · Answer 3 · answered Nov 12 '15 at 03:29

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 '15 at 03:29

Steven Na

19
2

Thank you, I checked your code and it works well! Does `return` makes this magic? – Heedoo Nov 12 '15 at 04:10
1

No problem :-) happy day~ – Steven Na Nov 12 '15 at 04:22

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

3 Answers3

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