click and re-click function within click function

Question

I have a image in which I wanted to call click and re-click function. So I used .toggle() function instead of .click() function but its hiding the image without click so I decided to make click and re-click function within .click() function like below:

$('.imgclass').click(function(){
   $(this).addClass('btn');
    if($(this).attr('class','btn')){

        $(this).css('background-color','blue');
        $(this).removeClass('btn');
    } else {
        alert('sorry');
    }
});

But in my code else statement is not working. In the first click it add background-color to blue and remove its class and then it wouldn't find the class btn so it should alert 'sorry' but its not alerting. I think there is other best idea to make click and re-click function within .click() function. How to accomplish this?

demo

Johan · Accepted Answer · 2013-09-13 08:40:08Z

3

$('.imgclass').click(function(){

   $(this).toggleClass('btn');

    if($(this).hasClass('btn')){
        $(this).css('background-color','blue');
    } else {
        alert('sorry');
    }
});

In order to make your if case work, you need to use the getter from attr:

if($(this).attr('class') === 'btn'){

This would only work right of the bat if btn is the only class on the button. I recommend my approach over this, though.

answered Sep 13, 2013 at 8:40

Johan

35.4k62 gold badges191 silver badges309 bronze badges

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

Comments

netchkin · Accepted Answer · 2013-09-13 08:42:20Z

2

this happens because after you click the button, you

Add class btn (always)
ask if there is btn class
always find out that there is btn class (because you added it immediately after click in step 1).

Edit: I suggest you moving the addClass into the else block.

answered Sep 13, 2013 at 8:42

netchkin

1,3941 gold badge12 silver badges22 bronze badges

1 Comment

BENARD Patrick Over a year ago

It's true, on each click, class 'btn' is added, so the condition is always true.

Rohan Kumar · Accepted Answer · 2013-09-13 08:38:53Z

1

Try this,

$('.imgclass').click(function(){
    if($(this).hasClass('btn')){
        $(this).removeClass('btn');
    } else {
        $(this).addClass('btn');
    }
});

Fiddle http://jsfiddle.net/xQNK6/3/

Or simply

$('.imgclass').click(function(){
    $(this).toggleClass('btn');       
});

Fiddle http://jsfiddle.net/xQNK6/6/

answered Sep 13, 2013 at 8:38

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Comments

Alvaro · Accepted Answer · 2013-09-13 08:40:34Z

0

Your if condition is wrong.

In order to check whether an element has a class or not you should make use of hasClass function:

 if($(this).hasClass('btn')){

Othewise you are setting the class attribute and checking if it was set correctly.

Your complete code could look like this:

$('.imgclass').click(function(){
   $(this).addClass('btn');
    if($(this).hasClass('btn')){

        $(this).css('background-color','blue');
        $(this).removeClass('btn');
    } else {
        alert('sorry');
    }
});

Although i would recommend you to make use of toggleClass as other mates have pointed out.

answered Sep 13, 2013 at 8:40

Alvaro

41.7k31 gold badges174 silver badges352 bronze badges

Collectives™ on Stack Overflow

click and re-click function within click function

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related