javascript - 这个filterSystem函数有什么问题

我具有此滑块过滤器功能，正在尝试根据一个属性data-length过滤某些文本。因此，当滑块处于某个值时，它仅显示该数据长度值或更小的文本。

这是滑块和过滤器功能：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

 function filterSystem() {
   $("em.match.js-match").hide().filter(function () {
     var length = parseInt($(this).attr("data-length"));
     return slider.value <= length;
    }).show();
  }

是否有人可以告诉我为什么该功能filterSystem无法按我的要求工作？

here is the example

谢谢！

ps。我不想使用jquery-ui

最佳答案

我发现了两个问题：


您从未打电话给filterSystem();
您没有在项目中包含jQuery。


更新了此：

slider.oninput = function() {
  output.innerHTML = this.value;
  filterSystem();
}

工作演示

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  filterSystem();
}

function filterSystem() {
  $("em.match.js-match").css({
    'background-color': '#fff',
    'color': '#000'
  }).filter(function() {
    var length = parseInt($(this).attr("data-length"));
    if (slider.value <= length) {
      $(this).css({'background-color': $(this).attr("data-color"), 'color':'#fff'})
    }
  });

}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Round Range Slider</h1>

<div class="" "slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<div class="document__body">
  <p xml:id="100">
    <em class="match js-match" data-algorithm="text" data-algorithm-type="text" data-color="#2d2f49" data-id="match_1" data-length="22" data-reference="0" style="background-color: rgb(45, 47, 73); color: rgb(255, 255, 255);">This has 22 characters</em>
  </p>

  <p xml:id="101">
    <em class="match js-match match--active" data-algorithm="text" data-algorithm-type="text" data-color="#009b8b" data-id="match_20" data-length="12" data-reference="0" style="background-color: rgb(0, 155, 139); color: rgb(255, 255, 255);">This only 12</em>
  </p>
</div>