if an element has a certain CSS value do this

Question

When my button is clicked I change the color of the text,
after this copy changes text I would like to preform another action.

I wrote the following, but am not able to get a console or alert to work: http://codepen.io/leongaban/pen/IltKJ

$('#my_button').unbind('click').bind('click', function () {

    $(this).css('background', '#666666');
    $('#my_button').css('color', '#f58733');

    if ($('#my_button').css('color') == '#f58733') {
        alert('my_button has the color orange');
    }

});

I tried the CSS I found from Tamas's answer here.

Any thoughts on why the alert doesn't get hit?

Some browsers (firefox in particular I think) use `rbg(x,x,x)` for colors rather then `#xxxxxx`. This might be the problem you're facing. — , Aug 13 '13 at 21:58
Try using classes instead of setting the color property directly — omma2289, Aug 13 '13 at 21:59
A better option is to add a class instead. Then you can use `.hasClass('abc')`. — musicnothing, Aug 13 '13 at 22:00
why are you using `$(this)` in one place and `$("#my_button")` in another? — Kevin B, Aug 13 '13 at 22:02

score 3 · Accepted Answer · answered Aug 13 '13 at 22:04

3

Try this instead:

Codepen

$('#my_button').unbind('click').bind('click', function () {
    $(this).addClass('clicked');
    if ($('#my_button').is('.clicked')) { //or use $('#my_button').hasClass('clicked')
        alert('my_button has the color orange');
    }
});

answered Aug 13 '13 at 22:04

musicnothing

3,977
24
43

Thanks! :D I had a problem with loading a page after clicking that button. Well the page would load, but the color wouldn't change, I'd have to click it again to get the color to change. So I figured the page loading interrupted the color change – Leon Gaban Aug 13 '13 at 22:13

score 1 · Answer 2 · answered Aug 13 '13 at 22:04

I update your code....tested in Chrome:

$('#my_button').unbind('click').bind('click', function () {

 $(this).css('background', '#666666');
 $('#my_button').css('color', '#f58733');

 var color = $('#my_button').css('color');
 alert(color);

 if(color == 'rgb(245, 135, 51)'){
 alert('Hi');
 }

});

Check Here: http://codepen.io/anon/pen/Dilux

if an element has a certain CSS value do this

2 Answers2