Question

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

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（）一起使用，或者与另一个循环一起指向Categories数组。如何分别引用“类别”中的每个元素？

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>

Answer 1

来自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)
}

但是这是东西。如果您拥有所有这些数据，为什么不使用它来 build 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>

Answer 2

您需要对阵列进行一些按摩并测试是否为空

这里我使用...spread语法允许使用.add

添加数组

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].querySelector("header").innerHTML=data[i].title || ""
  boxes[i].querySelector("p").innerHTML=data[i].content.replace(/<\/?p>/,"");
  if(categories.length>0) boxes[i].classList.add(...categories)
}

.highlighted { background-color:yellow; }
 .specialheader { font-weight:bold; }
 .important { font-style :italic; }

<div class="container">
  <div class="box">
    <header>Header 1</header>
    <p>Para 1</p>
  </div>
  <div class="box">
    <header>Header 2</header>
    <p>Para 2</p>
  </div>
  <div class="box">
    <header>Header 3</header>
    <p>para 3</p>
  </div>
  <div class="box">
    <header>header 4</header>
    <p>Para 4</p>
  </div>
  <div class="box">
    <header>Header 5</header>
    <p>para 5</p>
  </div>
</div>

Answer 3

在添加类之前，请检查数据中category数组的长度，如果该数组为空，则会引发错误，请检查以下修复程序。（添加了点差运算符：

ActivityScope

如果您正上旧学校，并希望避免使用扩展运算符或较新的JS语法：

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

for (var i = 0; i < boxes.length; i++) {
    let box = boxes[i];

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

从对象数组（JS）向每个框添加类

3 个答案: