如何隐藏所有包含跨度值超过/不超过范围滑块当前值的部分?
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();
}
});
}
原文地址:https://www.jb51.cc/html/530389.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。