Javascript 未能对变量进行循环

我在某些块上在网格视图和列表视图之间进行切换，但未能在这些块上进行循环

onclick函数仅适用于html代码中四个块中的第一个块

我希望onclick函数在所有块中都能工作

如何使函数与for循环一起工作

HTML代码

<div class="container">
     <div class="buttons">
       <button id="grid">Grid</button>
       <button id="list" class="disable">List</button>
     </div>
     <div class="blocks" id="blocks">
       <div class="block list">
         <h2>Block 1</h2>
         <p>
          Lorem ipsum dolor sit amet,
          consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
       </div>

       <div class="block list">
        <h2>Block 2</h2>
        <p>
         Lorem ipsum dolor sit amet,
         consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident,
         sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

      <div class="block list">
        <h2>Block 3</h2>
        <p>
         Lorem ipsum dolor sit amet,
         consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident,
         sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

      <div class="block list">
        <h2>Block 4</h2>
        <p>
         Lorem ipsum dolor sit amet,
         consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident,
         sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
     </div>
   </div>

var grid_btn = document.getElementById('grid');
var list_btn = document.getElementById('list');
var blk = document.querySelectorAll('.blocks .block');
var blk_count = blk.length;



grid_btn.onclick = function(){
    for(var i = 0; i < blk_count; i++){
        var bk = blk[i];
        bk.classList.add("grid").remove("list");
    }
}

list_btn.onclick = function(){
    for(var i = 0; i < blk_count; i++){
        var bk = bl[i];
        bk.classList.add("list").remove("grid");
    }
}

网格
列表
第一区

Lorem ipsum dolor sit amet，
献祭精英，
这是临时性的劳动和就业机会。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
两人或两人在一个无教区的房间里互相指责。
除圣奥卡塔铜矿场意外，
这是我的错，因为我的母亲是我的母亲。

第2区

Lorem ipsum dolor sit amet，
献祭精英，
这是临时性的劳动和就业机会。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
两人或两人在一个无教区的房间里互相指责。
除圣奥卡塔铜矿场意外，
这是我的错，因为我的母亲是我的母亲。

第3区

Lorem ipsum dolor sit amet，
献祭精英，
这是临时性的劳动和就业机会。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
两人或两人在一个无教区的房间里互相指责。
除圣奥卡塔铜矿场意外，
这是我的错，因为我的母亲是我的母亲。

第4区

Lorem ipsum dolor sit amet，
献祭精英，
这是临时性的劳动和就业机会。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
两人或两人在一个无教区的房间里互相指责。
除圣奥卡塔铜矿场意外，
这是我的错，因为我的母亲是我的母亲。

JS代码

<div class="container">
     <div class="buttons">
       <button id="grid">Grid</button>
       <button id="list" class="disable">List</button>
     </div>
     <div class="blocks" id="blocks">
       <div class="block list">
         <h2>Block 1</h2>
         <p>
          Lorem ipsum dolor sit amet,
          consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
       </div>

       <div class="block list">
        <h2>Block 2</h2>
        <p>
         Lorem ipsum dolor sit amet,
         consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident,
         sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

      <div class="block list">
        <h2>Block 3</h2>
        <p>
         Lorem ipsum dolor sit amet,
         consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident,
         sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

      <div class="block list">
        <h2>Block 4</h2>
        <p>
         Lorem ipsum dolor sit amet,
         consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident,
         sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
     </div>
   </div>

var grid_btn = document.getElementById('grid');
var list_btn = document.getElementById('list');
var blk = document.querySelectorAll('.blocks .block');
var blk_count = blk.length;



grid_btn.onclick = function(){
    for(var i = 0; i < blk_count; i++){
        var bk = blk[i];
        bk.classList.add("grid").remove("list");
    }
}

list_btn.onclick = function(){
    for(var i = 0; i < blk_count; i++){
        var bk = bl[i];
        bk.classList.add("list").remove("grid");
    }
}

var grid\u btn=document.getElementById（'grid'）；
var list_btn=document.getElementById（'list'）；
var blk=document.querySelectorAll（'.blocks.block'）；
var blk_count=blk.length；
grid_btn.onclick=函数（）{
对于（变量i=0；i

访问数组元素（下标）时使用方括号（

[]

），而不是括号（

（）

）：

var bk=blk[i]；
//这里-----^-^

您可以使用.forEach（）简化您的工作；下面是javascript：

var grid_btn = document.getElementById('grid');
var list_btn = document.getElementById('list');
var blk = document.querySelectorAll('.blocks .block');

grid_btn.onclick = function(){
    blk.forEach(function(item, index){
        item.classList.add("grid");
        item.classList.remove("list");
    });
}

list_btn.onclick = function(){
    blk.forEach(function(item, index){
        item.classList.add("list");
        item.classList.remove("grid");
    });
}

我还遇到了类列表中chaining.remove（）的问题，我不确定它是否受支持（尽管我承认没有看到）。将其分离到另一行可以消除我所遇到的错误

工作小提琴：

---

blk[i]

not

blk（i）

它只在第一个区块起作用。。。仍然循环不工作-确定的事情！祝你好运。