아약스 예상대로 결과가 없습니다.

Question

결과가 합계가되는 Ajax 쿼리가 있습니다. 다음은 사용자 입력을 기반으로 이미지를 표시하는 데 사용됩니다. 두 개의 임계 값 - 사용자가 각각의 한계를 설정하는 입력 상자가있는 노란색과 빨간색

My 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

당신이 이미지에 CSS를 넣어했다

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

두 배 값을 정수 값에 대한 parseInt() 또는 parseFloat()를 사용해보십시오 디스플레이 : 없음 ...

이미지를 표시하려면 다음과 같이 작성해야합니다.

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

대신 $ ('# pic1'). show();