Ajax结果与预期不符

I have an Ajax query that GETS a result = total. This is then used to display an image based on a user input. There are two thresholds - a yellow and a red with input boxes where the user sets a limit for each

My Ajax query is bringing in the correct number, but this code is not displaying the images as I'd like. The yellow_button is always default and the red_button never displays when the red threshold has been surpassed.

What I want:

If < yellow threshold = show vote_btn
If >= yellow threshold && < red threshold = show yellow_btn
Else = show red_btn

My Actual code:

First threshold:
<input id="threshold_yellow" type="number" size="3" style="width: 3.5em;" value="" />
<br /><br /> 
Second threshold:
<input id="threshold_red" type="number" size="3" style="width: 3.5em;" value="" />
<br /><br />    
<div>total votes: <span id="output" style="font-weight: bold;">loading...</span></div>
<div id="graphic">
<img id="pic1" src="vote_btn.png" style="display: none;"/>
<img id="pic2" src="yel_btn.jpeg"  style="display: none;"/>
<img id="pic3" src="red_btn.png"  style="display: none;"/>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
     function update() 
    {
            $.ajax({
                url: 'simcon.php',
                type: 'GET',
        dataType: 'json',
                success: function(data)
        {
                    var total = data[0];
        $('#output').html(total);

        // Toggle graphic based on total's value.


        if (total < $('#threshold_yellow').val())
        {
            //$('#graphic').children().hide();
            $('#pic1').show();
        }
        else if (total < $('#threshold_red').val() || total >= $('#threshold_yellow').val())
        {   //$('#graphic').children().hide();
            $('#pic2').show();
        } 
        else
        {   //$('#graphic').children().hide();
            $('#pic3').show();
        } 
        }
            });        
         }

Try using parseInt() for integer value or parseFloat() for double value

if (parseInt(total) < parseInt($('#threshold_yellow').val()))
{
   //$('#graphic').children().hide();
   $('#pic1').show();
}
else if (parseInt(total) < parseInt($('#threshold_red').val()) || parseInt(total) >= parseInt($('#threshold_yellow').val()))
{   
   //$('#graphic').children().hide();
   $('#pic2').show();     
} 
else
{  
   //$('#graphic').children().hide();
   $('#pic3').show();
} 

you had put css in images as display:none...

so you have to write this to show images..

$('#pic1').css('display','block');

instead of $('#pic1').show();