javascript - 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?

Answer 1

试试这个：

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');
    }
});

Answer 2

我更新了您的代码....在 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');
 }

});

在这里查看：http ://codepen.io/anon/pen/Dilux