通过 RangeSlider 显示/隐藏 DIV 元素

问题描述

我想显示和隐藏一些具有范围的 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);
}

解决方法

您正在处理程序本身中应用 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;