Javascript条件不起作用答案

【问题标题】：Javascript conditional not workingJavascript条件不起作用
【发布时间】：2018-03-28 00:41:05
【问题描述】：

我正在努力解决一个简单的条件错误。目前，我正在同时添加两个类，而不仅仅是一个。我需要帮助弄清楚为什么会这样。当滑块的值介于 data-min 和 data-max 之间时，我想向跨度添加一个类，这可以在 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>

【问题讨论】：

你遇到了什么错误？
这段代码什么时候运行？您的脚本只有在 DOM 已经加载后才能正确运行 - 所以如果您的脚本在页面开头运行，它将无法工作。将您的代码包装在 DOMContentLoaded 的事件处理程序中。
@Mamun for 循环在我看来是正确的。它向下/向后计数。
您应该避免使用onfoo 样式的事件并改用addEventListener，因此请改用slider.addEventListener('input', function... )。
这里是正在发生的事情的 jsfiddle。 (jsfiddle.net/akvsfnoj)

标签： javascript html conditional conditional-formatting

【解决方案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>

【讨论】：