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

【问题标题】：jQuery Hide section with span value exceeding value of range sliderjQuery隐藏部分，跨度值超过范围滑块的值
【发布时间】：2019-01-10 12:29:56
【问题描述】：

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

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();       
)}

【问题讨论】：

将 id="data" 更改为 class 然后 .find('.data')
这里应该用句号代替逗号吗？ 41,99, 362,37, 和 789,64
跨度数据始终是一个带逗号的报价。很遗憾，这无法更改。

标签： javascript jquery html css

【解决方案1】：

您可以在main id 元素中找到所有section，并遍历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 Your fixed jsfiddle

【讨论】：

@user3087516 请检查我创建的jsfiddle。您的代码有问题。
谢谢！它正在工作，甚至在移动游侠滑块时“即时”运行。

【解决方案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。

【讨论】：

我看到您将范围滑块的最大值更改为 5000。您的代码正在运行，但忽略了跨度数据中的逗号，从而伪造了实际报价。
不需要吗？无论如何，您可以根据需要调整代码。这只是一个工作示例。
是的，我现在开始工作了！顺便说一句，“最接近”的选择器很棒。非常感谢！
另一个问题：隐藏功能是否可以“即时”移动范围滑块，而不仅仅是在鼠标单击/控制之后？
@user3087516 太好了！是的，您可以将事件change 更改为input。

【解决方案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>

【讨论】：

问题：span 数据总是一个带逗号的报价，就像我的源代码一样。