如何将课程切换到各种项目？

Question

我只想从各种项目切换一个班级。 我的意思是，我有5周的div .item用DIV中类.container类。 我可以将新班级切换到这5个项目吗？ 也许有一个循环？

我试图这样做，但似乎循环变得无限。

这是我尝试的：

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <button onclick="myFunction()"></button>
</div>

<script>
   function myFunction () {
       var x = document.getElementsByClassName("item");
       for (i=0; i<x.length; i+1) {
           x[i].classList.toggle('new-class');
       }
   }
</script>

我期望最后这样的事情（也许在JS中有一些循环）：

<div class="container">
    <div class="item new-class"></div>
    <div class="item new-class"></div>
    <div class="item new-class"></div>
    <div class="item new-class"></div>
    <div class="item new-class"></div>
</div>

Answer 1

您可以使用for循环和classList.add（）方法来完成此操作。

function myFunction() {
   var items = document.querySelectorAll('.item');

   for(var i = 0; i < items.length; i++) {
    items[i].classList.add('new-class');
   }
}