javascript - 如何检查跨度内的数字并根据值更改其颜色？

Question

这是我的。它没有正确读取值。

http://jsfiddle.net/neowot/7o87wrsy/

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

另外，我在这里还有一个问题。该站点将链接到多个不同的电影。每次他们点击电影链接时，都会弹出相同的 div，但会根据数据库中的内容对电影进行唯一评级。

将包含电影评级的跨度作为“ID”或“类”类型更合适，还是两者都不合适？

Answer 1

使用 text() 而不是 val 跨度元素使用 text()

    $('.InterestLink').click(function() {
        $('#InterestExpander').fadeIn(450);
        
        if (parseInt($('.RatingGeneralNumber').text()) > 50 ) {
            $('.RatingGeneralNumber').css({"color":"green"});
        }
     
    }); 



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

.InterestLink {
}

#InterestExpander {
    color:white;
    background-color:#484848;
    position:fixed;
    margin-left:auto;
    margin-right:auto;
    width:700px;
    height:480px;
    display:none;
    box-shadow:0px 0px 5px 0px #000000;
}

 
#InterestExpanderX {
    float:right;
    cursor:pointer;
    font-family:Arial;
    font-size:50px;
}


.RatingGeneralNumber{
    display:block;
    font-size:22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a class="InterestLink">Click me</a>

<div id="InterestExpander">
            <div id="InterestExpanderX">
                &times;
            </div>
         
            <br><br>
                   
            General Rating: 
            <span class="RatingGeneralNumber">80%</span>
</div>