使用Hidden Field Values编写JQuery / Javascript IF / else语句

Question

I'm trying to get a div to be assigned a CSS class based on the value of a hidden field that is loaded via ajax.

My code returns the proper value for the hidden field when called, but my div is always assigned the same css class, regardless of the result.

I'm guessing something is wrong with my IF statement syntax:

function doneLoading(){

var colorStatus = $('#colorStatus').val();

if(colorStatus = 'RED'){
    $('.circleFrame').addClass('redState'); 
}

else if(colorStatus = 'GREEN'){
    $('.circleFrame').addClass('greenState');   
}

else if(colorStatus = 'YELLOW'){
    $('.circleFrame').addClass('yellowState');  
}

else {
    alert("Something is broken");
}
}

Answer 1

It's because you're doing = assignment instead of == comparison. You may want to use http://jshint.com to help locate these sorts of bugs.

Consider the following alternative to shorten your code.

function doneLoading() {
    var color = $('#colorStatus').val().toLowerCase();
    $('.circleFrame').addClass(color + 'State');
}

---

To maintain the validation, you could do this:

var colors = {green:1, red:1, yellow:1};

function doneLoading() {
    var color = $('#colorStatus').val().toLowerCase();

    if (colors.hasOwnProperty(color))
        $('.circleFrame').addClass(color + 'State');
    else
        alert("Something is broken");
}

Answer 2

You're using the assignment operator instead of the comparison operator.

Try

if(colorStatus === 'RED'){
    $('.circleFrame').addClass('redState'); 
}

instead. (And similarly for the other colours.)