javascript-跨度值超出范围滑块的值的jQuery隐藏节

前端之家收集整理的这篇文章主要介绍了javascript-跨度值超出范围滑块的值的jQuery隐藏节 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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元素内找到所有部分,然后在section元素上循环并将其隐藏. 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

猜你在找的HTML相关文章