j查询隐藏范围值超过范围滑块值的部分

Question

如何隐藏包含范围值超过/不超过范围滑块当前值的所有部分？

HTML 范围滑块：

<span>Price from: </span><span id="price"></span><span> $</span>
<input type="range" min="0" max="1000" value="0" id="range"/>

HTML 部分：（示例）

<div id="main">
<section>
   <div class="content">
      <p>Current trade: <span id="data">41,99</span> $ on the market</p>
   </div>
</section>
<section>
   <div class="content">
      <p>Current trade: <span id="data">362,37</span> $ on the market</p>
   </div>
</section>
<section>
   <div class="content">
      <p>Current trade: <span id="data">789,64</span> $ on the market</p>
   </div>
</section>
</div>

到目前为止，我在jQuery中的尝试：

当前值显示在范围滑块上方的范围中：（工作）

var slider = document.getElementById("range");
var rdata = document.getElementById("price");
rdata.innerHTML = slider.value;
slider.oninput = function() {
rdata.innerHTML = this.value;
}

隐藏范围值

超过当前范围滑块值的所有部分：（不起作用）

$(document).ready(function(){    
   var slider = document.getElementById("range");
   var rdata = slider.value;
   $("#main").find('#data').each(function () {
      return parseInt($(this).text()) < rdata;
   }).parent().parent().hide();       
)}

Answer 1

您可以在

main id 元素中找到所有section，并循环访问部分元素并对其进行hide。 jQuery 找不到section标签，你可以用section类将其定义为div。你也可以找到jsfiddle。

var slider = document.getElementById("range");
var rdata = document.getElementById("price");
rdata.innerHTML = slider.value;
slider.oninput = function() {
  $("span#price").text(slider.value);
  $("#mainDiv").find("div.content").each(function() {
  if(parseInt($(this).find("span#data").text()) < slider.value) {
    $(this).parent().hide();
  }
  else {
    $(this).parent().show();
  }
});
}

找到 jsfiddle 您的固定 jsfiddle

Answer 2

您可以尝试以下操作：

$( document ).ready( function() {
     $( '#range' ).on( 'change', function() {
         var rdata = $( this ).val();
         $( '#main .content span' ).each( function () {
            if( parseInt( $( this ).text().replace( /D/g, '' ) ) < rdata ) {
                $( this ).closest( 'section' ).hide();
            } else {
                $( this ).closest( 'section' ).show();
            }
         } );
     } );   
} );

这是更新的FIDDLE。

编辑：

另一个问题：隐藏功能是否有可能"在 苍蝇"移动范围滑块，而不仅仅是在鼠标单击后/ 控制？

您可以通过在上面的代码中将事件change更改为input来做到这一点。

这是新的FIDDLE.

Answer 3

试试这个：

$(document).ready(function(){
	
     $("#price").text($("#range").val());
	$("#range").change(function(){
  var slider = $("#range").val();
  	   $(".data").each(function(){
        let val = $(this).text();
        if(parseInt(val) < slider)
          $(this).parents().eq(2).hide();
        else
          $(this).parents().eq(2).show();
       });
  });
	
  
});
       

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Price from: </span><span id="price"></span><span> $</span>
<input type="range" min="0" max="100000" value="0" id="range"/>
<div id="main">
<section>
   <div class="content">
      <p>Current trade: <span class="data">4199</span> $ on the market</p>
   </div>
</section>
<section>
   <div class="content">
      <p>Current trade: <span class="data">36237</span> $ on the market</p>
   </div>
</section>
<section>
   <div class="content">
      <p>Current trade: <span class="data">78964</span> $ on the market</p>
   </div>
</section>
</div>