Что не так в этой функции filterSystem

#javascript #jquery

Вопрос:

У меня есть эта функция ползункового фильтра, с помощью которой я пытаюсь отфильтровать некоторый текст на основе одного атрибута 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 работает не так, как я хочу?

вот пример

Спасибо!

p.s. Я не хочу использовать jquery-ui

1. isn't working as I want — как это должно работать? Что она делает вместо этого?

2. но вы используете jQuery в filterSystem()

3. jquery-пользовательский интерфейс !== jquery @FedeSc

4. вау, значит, все, что вам нужно было сделать, это фактически вызвать созданную вами функцию! звучит законно

Ответ №1:

Я обнаружил две проблемы:

Вы никогда не вызывали 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>

Expand snippet

1. Я хотел спросить вас еще об одной вещи. Я хочу изменить вместо .hide(), чтобы убрать выделение, поэтому цвет фона. Любой совет о том, как я мог бы этого добиться?

2. @ga4696 Я не понимаю, о чем вы спрашиваете, мне не ясно, о чем вы спрашиваете

3. эти два абзаца имеют цвет фона в качестве выделения, например: style="background-color: rgb(0, 155, 139); . Как я могу удалить это «выделение» текста вместо того, чтобы полностью скрывать текст с помощью .hide() . Надеюсь, я выразился немного яснее. И спасибо вам за вашу помощь!

4. @ga4696 попробуй посмотреть демо сейчас

5. @ga4696 попробуй проверить сейчас