更改鼠标滚轮时，Javascript Element.ClassName始终返回true

我有一个滚轮功能，可以在向下或向上滚动时更改div的类别

事实上，它在所有现代浏览器中都运行得非常好，问题是，它每次执行时都试图更改类，尽管我有一个验证可以阻止这种情况发生

该函数询问，如果div已经激活了该类，那么它就不应该更改，但是如果您查看控制台，它每次都会尝试这样做，尽管进行了验证

我不知道为什么className方法总是返回

true

我使用了jquery的

hasClass

函数，并且具有相同的行为

非常感谢你的帮助

JAVASCRIPT代码：

var sections = ['one', 'two', 'three', 'four', 'five'];

function changeSection(section) {
  for (var x = 0; x < sections.length; x++) {
    $('#bg-main').removeClass('bg-' + sections[x]);
    if (sections[x] === section) {
      if (document.getElementById('bg-main').className != ('bg-' + section)) {
        $('#bg-main').addClass('bg-' + section);
        console.log("Active: " + section);
      } else {
        console.log("Inactive: " + sections[x]);
      }
    }
  }
}
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"
if (document.attachEvent)
  document.attachEvent("on" + mousewheelevt, displaywheel)
else if (document.addEventListener)
  document.addEventListener(mousewheelevt, displaywheel, false)
var position = 0;

function displaywheel(e) {
  var evt = window.event || e
  var delta = evt.detail ? evt.detail : evt.wheelDelta
  if (delta < 0) {
    position = (mousewheelevt == 'DOMMouseScroll') ? position - 1 : position + 1;
  } else {
    position = (mousewheelevt == 'DOMMouseScroll') ? position + 1 : position - 1;
  }

  if (position < 0) position = 0;
  if (position > 100) position = 100;

  // Change sections on Scroll
  if (position >= 0 && position <= 19) {
    changeSection('one');
  } else if (position >= 20 && position <= 39) {
    changeSection('two');
  } else if (position >= 40 && position <= 59) {
    changeSection('three');
  }
  if (position >= 60 && position <= 79) {
    changeSection('four');
  } else if (position >= 80 && position <= 100) {
    changeSection('five');
  }
}

HTML代码：

<div id="bg-main" class="bg-one">SCROLL TO SEE THE CHANGE OF BACKGROUND</div>

滚动查看背景的变化

工作摆弄：

---

在检查元素是否具有传递到函数中的类之前，您正在删除该类（因此您的

if

语句永远不会计算为false）

在您的

change部分

函数中放置以下代码行是您的问题：

$('#bg-main').removeClass('bg-'+sections[x]);

您可以大大简化当前函数。首先检查元素是否已经具有所需的类。然后，如果没有，则从元素中删除所有类（而不是遍历它们并检查每个类），然后添加新类。例如：

const bg = $('#bg-main');

function changeSection(section) {
  if (!bg.hasClass('bg-' + section)) {
    bg.removeClass();
    bg.addClass('bg-' + section);
  }
}

---

很好的解决方案，你是对的。删除类时出现逻辑问题。尽管您的解决方案更好，谢谢。更新了您的解决方案并按预期工作，谢谢。

const bg = $('#bg-main');

function changeSection(section) {
  if (!bg.hasClass('bg-' + section)) {
    bg.removeClass();
    bg.addClass('bg-' + section);
  }
}