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

您可以在section id元素中找到所有main，并在section元素和hide上循环。 jQuery找不到section标签，您可以使用div类将其定义为section。您也可以找到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 Your fixed 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>

jQuery隐藏部分，其跨度值超过范围滑块的值

3 个答案: