Question

我有一个Ajax查询，GETS结果=总计。然后，这用于基于用户输入显示图像。有两个阈值 - 黄色和红色，带有输入框，用户为每个

设置限制

我的Ajax查询带来了正确的数字，但是这段代码并没有像我想的那样显示图像。 yellow_button始终是默认值，并且当超过红色阈值时，red_button永远不会显示。

我想要的是什么：

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

我的实际代码：

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

Answer 1

尝试将parseInt()用于整数值，或parseFloat()用于双值

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

Answer 2

你把css放在图片中作为display：none ...

所以你必须写这个以显示图像..

$（ '＃PIC1'）的CSS（ '显示器'， '块'）;

而不是$（'＃pic1'）。show（）;

Ajax结果与预期不符

2 个答案: