Question

简单地说，我已经进入了javascript（现在，只是简单的DOM操作东西...... css和那......）。

我发现有很多方法可以在点击时改变CSS，或者如果浏览器宽度是一定的大小等......这是我到目前为止找到的最干净的方式，直到我开始添加更多元素......现在，它运行得足够快，控制台上没有错误......这可能只是因为我对这种语言不熟悉，但有没有更清晰的方法来做我所做的事情。在这做了什么？用较少的写作来表达一些东西...

或者javascript在CSS中可以做些什么？（因此jQuery）......

我现在更愿意避免使用jQuery。我从根本开始，因为我讨厌使用我不太懂的图书馆。谢谢！*

请参阅下面的代码：

// The onclick HTML function

function openNav() {
  // Get the elements
  var a = document.getElementById("menucontrol"),
      b = document.getElementById("overlaycontrol"),
      c = document.getElementById("id01"),
      d = document.getElementById("id02"),
      e = document.getElementById("id03");

  // Add /or remove "__open" to/from classes
  if (a.className === "nav") {
    a.className += "__open",
    b.className += "__open",
    c.className += "__open",
    d.className += "__open",
    e.className += "__open";
  } else {
    a.className = "nav",
    b.className = "overlay",
    c.className = "burger__top",
    d.className = "burger__middle",
    e.className = "burger__bottom";
  }
}

Answer 1

h2oooooooo是对的，但根据经验，只要你看到这样的重复，就可以将它提取到函数，循环和/或其他语言结构中。例如，如果你真的想继续做你正在做的事情，你可以重构成这样的事情：

var navOpen = false;

function updateNavClass(id, className) {
    var el = document.getElementById(id);
    el.className = navOpen ? className + '__open' : className;
}

function openNav() {
    navOpen = !navOpen;

    updateNavClass('menucontrol', 'nav');
    updateNavClass('overlaycontrol', 'overlay');
    updateNavClass('id01', 'burger__top');
    updateNavClass('id02', 'burger__middle');
    updateNavClass('id03', 'burger__bottom');
}

所以大部分的重复都消失了。

是否有更简洁的方法来制作这个脚本？

1 个答案: