How to check a number inside a span and change its color based on the value?

Here is what I have. It isn't reading the value correctly.

http://ift.tt/1JTDscG

HTML:

<a class="InterestLink">Click me</a>

<div id="InterestExpander">
            <div id="InterestExpanderX">
                &times;
            </div>

            <br><br>

            General Rating: 
            <span class="RatingGeneralNumber">80%</span>
</div>

CSS:

<a class="InterestLink">Click me</a>

<div id="InterestExpander">
            <div id="InterestExpanderX">
                &times;
            </div>

            <br><br>

            General Rating: 
            <span class="RatingGeneralNumber">80%</span>
</div>

jQuery:

$('.InterestLink').click(function() {
    $('#InterestExpander').fadeIn(450);

    if (parseInt($('.RatingGeneralNumber').val()) > 50 ) {
        $('.RatingGeneralNumber').css({"color":"green"});
    }

}); 



$('#InterestExpanderX').click(function() {
    $('#InterestExpander').fadeOut(250);
});

Also, another question while I'm here. This site will have links to multiple different movies. Each time they click on a movie link, the same div will pop up, but with a rating unique to the movie based on what the database says.

Would the span be containing the movie rating be more appropriate as an "ID" or "Class" type, or neither?