Question

<input type="range" name="rangeInput" min="100000" max="750000" onchange="updateTextInput(this.value);">

这是我的滑块代码，输出低于

的值

<div id="sliderValue">
<p>Max Value £</p>
<input type="text" id="textInput" value="">
</div>

该值由以下JS

控制

function updateTextInput(val) {
document.getElementById('textInput').value=val;
}

当.plot-price大于#sliderValue中的值时，我需要创建一个隐藏以下代码块的函数。

<div class="plot-item col-xs-12 four">
 <div class="plot-img">
  <img src="img/mobile/overview-img.jpg" class="img-border img-responsive">
 </div>
 <div class="plot-details">
  <h2 class="plot-location">Cornwall</h2>
  <p class="plot-number">Plot 5</p>
  <ul>
   <li class="bedrooms">4 bedrooms</li>
   <li  class="plot-price">255995</li>
   <li  class="plot-view"><a href="plot-page.html"> View Plot</a></li>
  </ul>
  <p class="plot-status">Sold</p>
 </div>
</div>

提前感谢任何格式/问题错误的帮助和道歉（第一次）

Answer 1

为您的区块添加ID！

function updateTextInput(val) {
    $('#textInput').val(val);
    if(val < $('.plot-price').val())
    {
        $('#yourid').fadeOut();
    }
}

此外，您不应该使用onchange-Attribute。拆分你的源代码！ HTML：

<input type="range" name="rangeInput" id="myInputRange" min="100000" max="750000">
<input type="text" id="textInput" value="">
<div class="plot-item col-xs-12 four">
    <!-- Other code -->
</div>

使用Javascript：

$('#myInputRange').change(function() {
    value = $(this).val();
    $('#textInput').val(value);
    if(value < $('.plot-price').val())
    {
        $('#yourid').fadeOut();
    }
    else
    {
        $('#yourid').fadeIn();
    }
}

Answer 2

我认为您正在寻找的是过滤页面，如果是这样，请尝试

function updateTextInput(val) {
    $('#textInput').val(val);
    $('.plot-item').hide().filter(function () {
        return val >= +$(this).find('.plot-price').text()
    }).show();
}

演示：Fiddle

如何使用jQuery或JavaScript过滤掉范围之上的结果

2 个答案: