使用类名切换 JavaScript 中的操作

Question

我有一个 JavaScript 函数 openWall();，它设置为将 class 添加到 div。但是，现在我想切换回此操作。我已经完成了功能 closeWall(); 以恢复此操作，但是我不知道如何让 div 识别它。

脚本：

function openWall() {
  var wall;
  theWall = document.getElementById("wall");

  theWall.className = "menu-responsive";

  function closeWall() {
    theWall.className = "";
  }

}

和 HTML:

<div class="hamburger">
  <a href="#" onclick="openWall();">Menu</a>
</div>
<div id="wall"></div>

Answer 1

确保您确实调用了 closeWall() 函数，否则其中的代码不会被执行。除此之外，您的代码应该可以工作。

除此之外，我建议通过将 .className 保存在变量中，将其设置回更改前的任何值。

Answer 2

您可以尝试如下操作来切换 class 名称

<!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <div class="hamburger">
      <a href="#" onclick="toggleWall();">Menu</a>
    </div>
    <div id="wall"> wall </div>
    <script>
    function toggleWall() {
      var wall;
      theWall = document.getElementById("wall");

     if(theWall.className ==="abc"){
        theWall.className = "menu-responsive";
     }else{
        theWall.className = "abc";
    }

    }
    </script>
    </body>
    </html>

Answer 3

单击元素时无需尝试调用 openWall() 或 closeWall() 函数，只需使用 toggleWall() 函数打开或关闭相关元素即可关于其当前状态；这可以通过查找表示其打开状态的 class-name 来确定（没有 class-name 意味着墙没有打开）。所以，我建议如下：

function toggleWall() {
  var theWall = document.getElementById('wall');

  if (theWall.className.indexOf('menu-responsive') > -1) {
    // indexOf returns -1 when the string is not found,
    // therefore 'theWall' is found if the index is
    // greater than -1; so 'theWall' is 'open', so here
    // we close it:
    theWall.className = theWall.className.replace('menu-responsive', '');
  } else {
    // the else here means that the string was not found,
    // returning an index of -1 (or, technically, -1 or less;
    // but indexOf only returns -1, 0 or positive indexes.
    // so the string was not found, means the 'theWall' is
    // 'closed' and so must be opened:
    theWall.className = theWall.className + ' menu-responsive';
  }
}

function toggleWall() {
  var theWall = document.getElementById('wall');

  if (theWall.className.indexOf('menu-responsive') > -1) {
    theWall.className = theWall.className.replace('menu-responsive', '');
  } else {
    theWall.className = theWall.className + ' menu-responsive';
  }
}

#wall {
  background-color: red;
  height: 4em;
}
#wall.menu-responsive {
  background-color: limegreen;
}
#wall::before {
  content: 'closed';
}
#wall.menu-responsive::before {
  content: 'open';
}

<div class="hamburger">
  <a href="#" onclick="toggleWall();">Menu</a>
</div>
<div id="wall"></div>

JS Fiddle demo.

或者，使用稍微更新的方法，您可以简单地使用 Element.classList.toggle() 添加或删除给定的 class-name 适当的：

function toggleWall() {
  var theWall = document.getElementById('wall');
  theWall.classList.toggle('menu-responsive');
}

function toggleWall() {
  var theWall = document.getElementById('wall');

  // find out if the list of classes of the
  // Element contains the class-name of
  // 'menu-responsive' it's removed, and if
  // it is not present then it's added:
  theWall.classList.toggle('menu-responsive');
}

#wall {
  background-color: red;
  height: 4em;
}
#wall.menu-responsive {
  background-color: limegreen;
}
#wall::before {
  content: 'closed';
}
#wall.menu-responsive::before {
  content: 'open';
}

<div class="hamburger">
  <a href="#" onclick="toggleWall();">Menu</a>
</div>
<div id="wall"></div>

JS Fiddle demo.

此外，我强烈建议您不要使用内联 HTML 属性进行事件绑定。切换到 JavaScript 绑定事件使得维护和更新更容易一些，而不必查找和替换散落在 HTML 源代码中的函数调用。也就是说，我建议使用 EventTarget.addEventListener() 添加事件处理程序：

document.querySelector('.hamburger > a[href="#"]')
  .addEventListener('click', toggleWall);

function toggleWall() {
  var theWall = document.getElementById('wall');
  theWall.classList.toggle('menu-responsive');
}

// document.querySelector() returns the first
// HTML element matched by the CSS selector
// supplied as an argument; here it searches for
// an <a> element with a 'href' attribute equal
// to '#' which is the child of another element
// with the 'hamburger' class-name:
document.querySelector('.hamburger > a[href="#"]')

  // binds the 'toggleWall()' function as the
  // event-handler for the 'click' event:
  .addEventListener('click', toggleWall);

function toggleWall() {
  var theWall = document.getElementById('wall');
  theWall.classList.toggle('menu-responsive');
}

#wall {
  background-color: red;
  height: 4em;
}
#wall.menu-responsive {
  background-color: limegreen;
}
#wall::before {
  content: 'closed';
}
#wall.menu-responsive::before {
  content: 'open';
}

<div class="hamburger">
  <a href="#">Menu</a>
</div>
<div id="wall"></div>

使用类名切换 JavaScript 中的操作

Toggle back an action in JavaScript using classname

javascript

onclick

toggle