Question

我遇到了问题，但不明白出了什么问题。

＆＃13;

function fun1() {
  var rng = $('#r1').val(); //rng - это Input
  $('#one').text(rng);
  jQuery.each($('.content'), function(i, val) {
    if ($(this).text() < rng) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
}

＆＃13;

.content {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100000" id="r1" oninput="fun1()" />
<p id="one"></p>

<div class="content">2345</div>
<div class="content">85552</div>
<div class="content">2345</div>
<div class="content">25345</div>
<div class="content">123</div>
<div class="content">1</div>
<div class="content">852524</div>
<div class="content">22</div>

＆＃13;

程序应将内容中的数字与输入范围内的范围进行比较。但是在输出中，即使是那些大于范围的div也取消隐藏。我不知道出了什么问题。

Answer 1

您可以使用解决方案

＆＃13;

function fun1() {
  var rng = parseInt($('#r1').val()); //rng - это Input
  $('#one').text(rng);
  jQuery.each($('.content'),function(i,val){
    if(parseInt($(this).text()) < rng){
      $(this).show();
    } else{   
      $(this).hide();
    }
  });
}

＆＃13;

.content{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max ="100000" id="r1" oninput="fun1()" />
<p id="one"></p>

<div class ="content">2345</div>
<div class ="content">85552</div>
<div class ="content">2345</div>
<div class ="content">25345</div>
<div class ="content">123</div>
<div class ="content">1</div>
<div class ="content">852524</div>
<div class ="content">22</div>

＆＃13;

只有代码更改位于if statement

内

$(this).text()将返回字符串＆amp;所以每当你试图检索valie时都要使用parseInt。

代码已更改

var rng = parseInt($('#r1').val());

if(parseInt($(this).text()) < rng){

希望这会对你有所帮助。

Answer 2

此处的问题是您尚未解析divs内容和range值，因此它被视为string而不是number，所以它是string比较，这就是为什么你没有得到理想的结果。

使用parseInt()将其解析为代码中的number：

function fun1() {
  var rng= parseInt($('#r1').val());

  $('#one').text(rng);
  jQuery.each($('.content'),function(i,val){
    if(parseInt($(this).text()) < rng){
      $(this).show();
    } else{   
      $(this).hide();
    }
  });
}

<强>演示：

function fun1() {
  var rng= parseInt($('#r1').val());
  
  $('#one').text(rng);
  jQuery.each($('.content'),function(i,val){
    if(parseInt($(this).text()) < rng){
      $(this).show();
    } else{   
      $(this).hide();
    }
  });
}

.content{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max ="100000" id="r1" oninput="fun1()" />
<p id="one"></p>

<div class ="content">2345</div>
<div class ="content">85552</div>
<div class ="content">2345</div>
<div class ="content">25345</div>
<div class ="content">123</div>
<div class ="content">1</div>
<div class ="content">852524</div>
<div class ="content">22</div>

隐藏div通过范围输入阻止jQuery

2 个答案: