Question

我使用HTML和javascript显示范围值。我想要显示的输入值大于id='c0'的3并隐藏id='c1'，如果显示的输入值小于id='c0'的3并显示id='c1'。我现在得到的是更改任何值时将显示id='c1'并隐藏id='c0'

<style> #c1{ display: none; }</style>
<input onchange="document.getElementById('div1').style.display='block';document.getElementById('div2').style.display='none'" class="range-slider__range slider InputC" type="range" value="0" min="0" max="50" name="anak_laki">
<span class="range-slider__value">0</span>

<ul id="c0" class="data-list-2 clearfix">
                        <li>
                        Ini muncul kalo kurang dari 0
                        </li>
                    </ul>
                    <ul id="c1" class="data-list-2 clearfix">
                        <li>
                        Ini akan muncul kalo lebi dari 0
                        </li>
                    </ul>

<script type="text/javascript">
//This is code for range value
var rangeSlider = function(){
  var slider = $('.range-slider'),
      range = $('.range-slider__range'),
      value = $('.range-slider__value');

  slider.each(function(){

    value.each(function(){
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function(){
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();
//This is code for range value end

//Form Jumlah Harta
function startCalc(){
interval = setInterval("calc()",1);}
function stopCalc(){
clearInterval(interval);}
//InputC
$(".InputC").click(function(){
  if($(this).val() > 3){
    $("#c0").show();
    $("#c1").hide();
  }else{
    $("#c0").hide();
    $("#c1").show();
  }
  })
</script>

Answer 1

对于您要执行的操作，您的实现似乎过于复杂。这就是我要这样做的方式：

$(function(){
  $("#range").on("change", function(){toggle($(this).val())});
  toggle($("#range").val());
});

function toggle(val) {
  if (val >= 1 && val < 3) {
    $("#c1").show();
    $("#c0, #c2").hide();
  } else if(val < 1) {
    $("#c0").show();
    $("#c1, #c2").hide();
  } else {
    $("#c2").show();
    $("#c0, #c1").hide();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="range" type="range" min="0" max="5" value="2" />

<p id="c0">range < 1</p>
<p id="c1">range < 3</p>
<p id="c2">range >= 3</p>

Answer 2

使用parseInt。

if(parseInt($(this).val()) > 3){<br/>
$("#c0").show();<br/>
    $("#c1").hide();<br/>
  }else{<br/>
    $("#c0").hide();<br/>
    $("#c1").show();<br/>
  }<br/>
<br/>

这可能有效。

我的JavaScript中的if语句无法正常运行

2 个答案: