在 javascript 中使用 classList 迭代元素和切换

Question

条件：

请使用javascript和classList属性反转哪些元素有.highlightclass.
基本上迭代所有 <li> 元素并切换 .highlight 的 class。每一个。
您不应更改 HTML 和 CSS 中的任何内容。

Your result should be like this!

/* app.js */
let list =  document.querySelector('li');

list.classList.add('');

/* index.css */
/*No need to touch anything in this file:*/
li {
  background-color: #B10DC9;
}

.highlight {
  background-color: #7FDBFF;
}

<!-- index.html -->
<!DOCTYPE html>
<head>
    <title>ClasList</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="index.css">
    <!--LEAVE THIS FILE ALONE!-->
    <ul>
        <li>Hello</li>
        <li class="highlight">Hello</li>
        <li>Hello</li>
        <li>Hello</li>
        <li class="highlight">Hello</li>
        <li>Hello</li>
    </ul>
    <script src="app.js"></script>
</body>
</html>

Answer 1

如果 .highlight class 样式应用于 <li>，则以下解决方案从 <li> 中删除 .highlight class 样式.如果 .highlight class 样式未应用于 <li> 元素，则将 .highlight class 样式添加到 <li> 元素。

方法一

/* The querySelectorAll() method is used to select all <li> elements. */
let list = document.querySelectorAll('li');
var listArray = [...list];

/* Each <li> element is checked using the forEach() method. */
listArray.forEach(element => {
  /* Is the ".highlight" class style applied to the <li> element? */
  if(element.classList.contains("highlight")) {
    /* Remove the ".highlight" class style from the <li> element. */
    element.classList.remove("highlight");
  }
  else {
    /* Add the class style ".highlight" to the <li> element. */
    element.classList.add("highlight");
  }
});

li {
  background-color: #B10DC9;
}

.highlight {
  background-color: #7FDBFF;
}

<!DOCTYPE html>
<head>
  <title>ClasList</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
  <ul>
      <li>Hello</li>
      <li class="highlight">Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li class="highlight">Hello</li>
      <li>Hello</li>
  </ul>
  <script src="app.js"></script>
</body>
</html>

方法二

/* The querySelectorAll() method is used to select all <li> elements. */
let list = document.querySelectorAll('li');

window.addEventListener('load', (event) => {
  for(let i = 0 ; i < list.length ; ++i) {
    if(list[i].classList.contains("highlight")) 
      list[i].classList.remove("highlight");
    else 
      list[i].classList.add("highlight");
  }
});

li {
  background-color: #B10DC9;
}

.highlight {
  background-color: #7FDBFF;
}

<!DOCTYPE html>
<head>
  <title>ClasList</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
  <ul>
      <li>Hello</li>
      <li class="highlight">Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li class="highlight">Hello</li>
      <li>Hello</li>
  </ul>
  <script src="app.js"></script>
</body>
</html>

Answer 2

/* The querySelectorAll() method is used to select all <li> elements. */

const li= document.querySelectorAll('li');

for(let i of li) {
    i.classList.toggle("highlight");
}

li {
  background-color: #B10DC9;
}

.highlight {
  background-color: #7FDBFF;
}

<!DOCTYPE html>

<head>
    <title>ClasList</title>
 
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <ul>
        <li>Hello</li>
        <li class="highlight">Hello</li>
        <li>Hello</li>
        <li>Hello</li>
        <li class="highlight">Hello</li>
        <li>Hello</li>
    </ul>
</body>

</html>

在 javascript 中使用 classList 迭代元素和切换

Iterate elements and toggle using classList in javascript

html

javascript

dom

dom-manipulation

dom-events

方法一

方法二