javascript - 从对象(JS)中的数组向每个框添加类

This question already has answers here:

Is there a way to add/remove several classes in one single instruction with classList?
                                
                                    （13个回答）
                                
                        
                2年前关闭。
            
        

我想将类似数据数组（类别）中的类的名称依次添加到每个框（在容器中）。
例如，除“框”类外的第一个框应具有：“突出显示”，“特殊标题”，“重要”类。
我试图这样做，但是不起作用：

var boxes = document.querySelectorAll('.box');

  for (var i = 0; i < boxes.length; i++) {

    //Add classes to all boxes
    var categories = data[i].categories;
    boxes[i].classList.add(categories)
  }

我觉得它必须与forEach（）一起使用，或者与另一个指向categorys数组的循环一起使用。
如何分别引用“类别”中的每个元素？

var data = [{
    id: 'box1',
    title: 'First box',
    content: '<p>Lorem ipsum dolor sit amet!</p>',
    categories: ['highlighted', 'special-header', 'important']
  },
  {
    id: 'box2',
    title: 'Second box',
    content: '<p>Lorem ipsum dolor sit amet!</p>',
    categories: ['special-header', 'important']
  },
  {
    id: 'box3',
    title: 'Third box',
    content: '<p>Lorem ipsum dolor sit amet!</p>',
    categories: ['highlighted', 'important']
  },
  {
    id: 'box4',
    title: 'Fourth box',
    content: '<p>Lorem ipsum dolor sit amet!</p>',
    categories: ['highlighted']
  },
  {
    id: 'box5',
    title: 'Fifth box',
    content: '<p>Lorem ipsum dolor sit amet!</p>',
    categories: []
  },
];
var boxes = document.querySelectorAll('.box');

for (var i = 0; i < boxes.length; i++) {

  //Add classes to all boxes
  var categories = data[i].categories;
  boxes[i].classList.add(categories)
}

<div class="container">
  <div class="box">
    <header></header>
    <p></p>
  </div>
  <div class="box">
    <header></header>
    <p></p>
  </div>
  <div class="box">
    <header></header>
    <p></p>
  </div>
  <div class="box">
    <header></header>
    <p></p>
  </div>
  <div class="box">
    <header></header>
    <p></p>
  </div>
</div>

最佳答案

从classList documentation：


  使用传播语法添加或删除多个类

var boxes = document.querySelectorAll('.box');

for (var i = 0; i < boxes.length; i++) {
  var categories = data[i].categories;
  boxes[i].classList.add(...categories)
}

但是，这就是事情。如果您拥有所有这些数据，为什么不使用它来构建HTML，而不是填补空白？这是一个例子：

var data = [{"id":"box1","title":"First box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","special-header","important"]},{"id":"box2","title":"Second box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["special-header","important"]},{"id":"box3","title":"Third box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","important"]},{"id":"box4","title":"Fourth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted"]},{"id":"box5","title":"Fifth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":[]}];

// `map` over the data and return an array of HTML strings
const boxes = data.map(({ id, title, content, categories }) => {
  return `
    <div class="box ${categories.join(' ')}" id="${id}">
      <header>${title}</header>
      ${content}
    </div>
  `
});

// join the array and add the HTML to the container
const container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', boxes.join(''));

.box { border: 1px solid black; }
.special-header { color: green; }
.important { border: solid 1px red; }
.highlighted p { background-color: yellow; }

<div class="container"></div>

关于javascript - 从对象(JS)中的数组向每个框添加类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53301270/