Question

我的代码在document.getElementById('markOne').addClass('remview')上返回错误，显然不是function 为什么会发生这种情况以及如何在switch条件下向我的DOM元素添加一个类？

var q = 0;
var sq = {};
sq.e = document.getElementById("main-container");
if (sq.e.addEventListener) {
  sq.e.addEventListener("mousewheel", MouseWheelHandler, false);
  sq.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else sq.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {
  var e = window.event || e;
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  q = q + delta;
  if (q == -2) {
    q = -1;
  } else if (q == 1) {
    q = 0;
  }
  switch (q) {
    case 0:
      break;
    case -1:
      document.getElementById('markOne').addClass('remview');
      break;
  }
  console.log(delta)
  console.log(q)
  return false;
}

Answer 1

添加一个类：

document.getElementById('markOne').className += ' remview';

替换所有现有的类：

document.getElementById('markOne').className = 'remview';

添加多个类（通过传递以空格分隔的列表）：

document.getElementById('markOne').className += ' remview other stuff'

Answer 2

您也可以尝试：

   document.getElementById('markOne').classList.add('remview');

Answer 3

你能不能摆脱开关状况？
我的意思是，你所做的只是检查q变量是否等于-1，然后在元素中添加一个类，如果是，对吗？如果是这样，你可以摆脱你的开关条件另外，如果你这样做，你就可以完全摆脱~4~5行＆＃34;不必要的＆＃34; 代码，虽然目前看起来可能不多，但整理和/或者每隔一段时间摆脱4-5行代码，从长远来看，确实会产生大的差异。

以下是删除了switch语句并替换为if条件的代码，我也可以自由地修改代码：

var q = 0;
var sq = {};
sq.e = document.getElementById("main-container");
if (sq.e.addEventListener) {
  sq.e.addEventListener("mousewheel", MouseWheelHandler, false);
  sq.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else sq.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {
  var e = window.event || e;
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  q = q + delta;
  if (q == -2) {
    q = -1;
  } else if (q == 1) {
    q = 0;
  }
  // check if "q" IS NOT equal to "0" and that "q" IS EQUAL to "-1"
  if (q !== 0 && q === -1) {
    document.getElementById('markOne').addClass('remview');
  }
  console.log(delta)
  console.log(q)
  return false;
}

祝你好运，一切顺利。

交换机内的小型JS类型错误（非功能）

3 个答案: