DIV 元素 Show/Hide 通过 RangeSlider

Question

我想显示和隐藏一些具有范围的 DIV 元素。每个 DIV 元素都有一个特定的百分比值。

如果范围设置为70，则勾选DIV个元素的值，显示70及以上的元素。 70岁以下隐藏

但是这个代码结构不适用，我无法解决这个错误。

HTML:

<div class="similarQuestionFrame" data-similar-question-percentage-value="50">...</div>
<div class="similarQuestionFrame" data-similar-question-percentage-value="100">...</div>
<div class="similarQuestionFrame" data-similar-question-percentage-value="76">...</div>
<div class="similarQuestionFrame" data-similar-question-percentage-value="81">...</div>

JAVASCRIPT:

let range = document.getElementById("similarQuestionFilterInput");

let similarQuestionsPercentageFilter = () => {
  range.onchange = similarQuestionsPercentageFilter;
  
  $(".similarQuestionFrame").each(function() {
    if ($(this).attr('data-similar-question-percentage-value') >= range.value) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
  
  console.log(range.value);
}

Answer 1

您正在处理程序本身中应用 onchange 处理程序，因此它永远不会被调用。将它向下移动几行，它应该可以工作：

let range = document.getElementById("similarQuestionFilterInput");
let similarQuestionsPercentageFilter = () => {
    $(".similarQuestionFrame").each(function () {
        if ($(this).attr('data-similar-question-percentage-value') >= range.value) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}
//Apply onchange here
range.onchange = similarQuestionsPercentageFilter;

DIV 元素 Show/Hide 通过 RangeSlider

DIV Element Show/Hide via RangeSlider

javascript

jquery

rangeslider