Javascript 条件无效

Question

我遇到了一个简单的条件错误。目前，我同时添加了两个 class 而不是一个。我需要帮助弄清楚为什么会这样。当滑块的值介于 data-min 和 data-max 之间时，我想向跨度添加一个 class，这可以在 html 中找到。

var slider = document.querySelector('.o-donation--slider');
var itemHighlight = document.querySelectorAll('.item--highlight span');
slider.oninput = function() {
  for (var j = itemHighlight.length - 1; j >= 0; j--) {
    var dataMin = itemHighlight[j].dataset.min;
    var dataMax = itemHighlight[j].dataset.max;
    if (this.value > dataMin && this.value < dataMax) {
      itemHighlight[j].classList.add('active');
    } else {
      itemHighlight[j].classList.remove('active');
    }
  }

}

<form action="#">
  <div class="col s12 align-center">
    <input class="o-donation--slider" type="range" min="1" max="5000" value="100">
  </div>
</form>
<div class="col s12 align-center item--highlight">
  <span data-min="1" data-max="249">number</span>
  <span data-min="250" data-max="449">number</span>
  <span data-min="500" data-max="999">number</span>
  <span data-min="1000" data-max="2000">number</span>
  <span data-min="2001" data-max="3000">number</span>
  <span data-min="3001" data-max="5000">number</span>
</div>

Answer 1

您需要先将数据集值转换为数字 - 在您的版本中，您正在比较它们的 字符串 :

const slider = document.querySelector('.o-donation--slider');
const itemHighlightSpans = document.querySelectorAll('.item--highlight span');
slider.addEventListener('input', () => {
  const sliderValue = slider.value;
  itemHighlightSpans.forEach(itemHighlightSpan => {
    const { min, max } = itemHighlightSpan.dataset;
    const minNum = Number(min);
    const maxNum = Number(max);
    if (sliderValue >= minNum && sliderValue <= maxNum) itemHighlightSpan.classList.add('active');
    else itemHighlightSpan.classList.remove('active');
  });
});

.active {
  background-color: yellow;
}

<form action="#">
  <div class="col s12 align-center">
    <input class="o-donation--slider" type="range" min="1" max="5000" value="100">
  </div>
</form>
<div class="col s12 align-center item--highlight">
  <span data-min="1" data-max="249">number</span>
  <span data-min="250" data-max="449">number</span>
  <span data-min="500" data-max="999">number</span>
  <span data-min="1000" data-max="2000">number</span>
  <span data-min="2001" data-max="3000">number</span>
  <span data-min="3001" data-max="5000">number</span>
</div>

Javascript 条件无效

Javascript conditional not working

html

javascript

conditional

conditional-formatting