Event on First click, Second click, and Third click

Question

$('#element').toggle(function(){
  $(this).addClass('one');
},
                     function(){
  $(this).removeClass('one').addClass('two');
},
                     function(){
  $(this).removeClass('two').addClass('three');
});

#element{
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}
.one{
  background: orange;
}
.two{
  background: blue;
}
.three{
  background: red;
}

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<div id="element"></div>

Hi, I am trying to develop the UI on the base of three clicks on the same id, heres the code which i was trying. But when I'm rendering it, I was getting the error as

`Uncaught TypeError: r.easing[this.easing] is not a function
    at init.run (jquery-3.1.1.min.js:3)
    at i (jquery-3.1.1.min.js:3)
    at Function.r.fx.timer (jquery-3.1.1.min.js:3)
    at hb (jquery-3.1.1.min.js:3)
    at HTMLDivElement.g (jquery-3.1.1.min.js:3)
    at Function.dequeue (jquery-3.1.1.min.js:3)
    at HTMLDivElement.<anonymous> (jquery-3.1.1.min.js:3)
    at Function.each (jquery-3.1.1.min.js:2)
    at r.fn.init.each (jquery-3.1.1.min.js:2)
    at r.fn.init.queue (jquery-3.1.1.min.js:3)`

can any one help me in solving it. I googled but dint found the solution.

Thanks.

CSKADMIN

This is not how [`.toggle()`](http://api.jquery.com/toggle/) works — Andreas, Feb 15 '17 at 07:16
why do you put 3 functions into `.toggle()` that doesn't make any sense... — JohnnyAW, Feb 15 '17 at 07:20

Rana Ghosh · Accepted Answer · 2017-02-15T08:06:01.023

3

Just Replace your jQuery with this:

var flag = 0, existing_class = '';
var class_value = ['one', 'two', 'three'];
$('#element').click(function(){
    if(flag <= 2)
    {
        $(this).removeClass(existing_class);
        $(this).addClass(class_value[flag]);
        existing_class = class_value[flag];
    }
    flag++;
});

OR

If you want to call repetitive 'one', 'two', 'three' class then you should try below code:

var flag = 1, existing_class = '';
var class_value = {1 : 'one', 2 : 'two', 3 : 'three'};
$('#element').click(function(){
    $(this).removeClass(existing_class);
    if(flag > 3) {
        $(this).addClass(class_value[flag % 3 === 0 ? 3 : flag % 3]);
        existing_class = class_value[flag % 3 === 0 ? 3 : flag % 3];
    } else {
        $(this).addClass(class_value[flag]);
        existing_class = class_value[flag];
    }
    flag++;
});

edited Feb 15 '17 at 08:06

answered Feb 15 '17 at 07:23

Rana Ghosh

4,514
5
23
40

Why negative? can't understand. It's completly working. – Rana Ghosh Feb 15 '17 at 07:29
1

Although code-only answers are ok, it's a good idea to explain why OP's solution didn't work and how your does in order to help others with similar problems. Also you're not removing the previous class, so your code isn't "completely working" – Alexandru Severin Feb 15 '17 at 07:38
@AlexandruSeverin I think you should remove your negative vote now. I have updated my anser in both ways. :) – Rana Ghosh Feb 15 '17 at 08:06
@RiotZeastCaptain Thanx :) – Rana Ghosh Feb 15 '17 at 08:39
no need for `if`-statement simply use `flag = (flag + 1) % 3;` at the end – JohnnyAW Feb 15 '17 at 08:43

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

try this may be it can help you

HTML-

<div class="element"></div>

CSS-

.element{
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}
.one{
  background: orange;
}
.two{
  background: blue;
}
.three{
  background: red;
}

JAVASCRIPT-

$('.element, .one, .two, .three').click(function() {                             
    this.className = {
       element: 'one', three : 'one', one: 'two', two: 'three'
    }[this.className];
});

You can understand it better by visiting the Stackoverflow Link for toggle among different classes.

gavgrif · Answer 3 · 2017-02-15T07:48:00.440

This will let you have a repeating alteration of colour based on clicking the coloured div. It works be having a data-attribute containing a number, using that number to remove the current class / background and incrementing the index to get the next color in the array and setting that as the color and also the data attribute.

Note the modulus in there - you have three options so having the count with %3 will always give you a 0,1, or 2 which you can use in to select the elemtns in the array as the class names.

$(document).ready(function(){
  var classes=['one','two','three'];
  
  $('#element').click(function(){
    var current = parseInt($(this).attr('data-index')) ;
    var next = (current+1)%3;
   $(this).attr('data-index' ,next);
   $(this).removeClass(classes[current]).addClass(classes[next]);
    });
  });

#element{
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}
.one{
  background: orange;
}
.two{
  background: blue;
}
.three{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the box to change the color</p>
<div id="element" class="one" data-index='0'></div>

score 0 · Answer 4 · answered Feb 15 '17 at 07:37

0

Only example.You can solve the problem by looking at this code.

Html Code

<p>Click me.</p>

Js Code

$(document).ready(function(){
    $("p").toggle(
        function(){$("p").css({"color": "red"});},
        function(){$("p").css({"color": "blue"});},
        function(){$("p").css({"color": "green"});
    });
});

Click on this

answered Feb 15 '17 at 07:37

Girl_engineer

145
1
2
20

2

you forgot to mention this: The toggle() method was deprecated in jQuery version 1.8, and removed in version 1.9. We have used an earlier version of jQuery (1.8 in the script tag), for this example to work. – JohnnyAW Feb 15 '17 at 08:08

score 0 · Answer 5 · answered Feb 15 '17 at 07:37

if i correct understand, you want this:

$('#element').click(function(){
  if($(this).hasClass('two')) 
    $(this).removeClass('two').addClass('three');

  if($(this).hasClass('one')) 
    $(this).removeClass('one').addClass('two');

  if(!$(this).hasClass()) 
    $(this).addClass('one');  
});

Here example.

Notice, order of condition important here

Event on First click, Second click, and Third click

CSKADMIN

5 Answers5