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

Question

我有这个滑块过滤器功能，我试图根据一个属性过滤一些文本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 不能按我的意愿工作？

这是示例

谢谢你！

ps 我不想使用 jquery-ui

Answer 1

我发现了两个问题：

1. 你从来没有打电话filterSystem();

2. 你没有包括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>