Append 文本，当属性值等于 css class 名称

Question

我正在尝试练习 state 渲染视图，其中 state 将确定 object 在 DOM 中的位置。

基本上，有两个 HTML 元素，都在 Javascript 中创建。 每个都有.one和.two类。 还有一个包含两个对象的数组，具有一个 slot 属性。 插槽将确定名称将分配给哪个 HTML 元素。

我尝试先循环遍历 state，然后嵌套.name class 的循环。 但是，在渲染时，第一个 object 会首先显示，此时它的插槽为两个； 所以理想情况下，汤姆出现在第二个 div 中。

我很感激我能得到的任何意见。 提前致谢！

Javascript

const body = document.querySelector('body');

const people = [
  {name: 'Tom', slot: 'two'},
  {name: 'Tim', slot: 'one'}
];

const createDiv = (arg) => {
  const div = document.createElement('div');

  div.classList.add('name', arg.slot);

  body.append(div);

  const namesClass = document.querySelectorAll('.name');

  people.forEach((ind)=>{
    namesClass.forEach((index)=>{
      if(index.classList.contains(ind.slot)){
        index.innerText = ind.name;
      };
    });
  });

  return div;
}

const render = () => {
  people.forEach(function(index){
    createDiv(index);
  });
}

render();

Answer 1

您的 if 条件似乎是错误的。 它可能看起来像这样：

if(index.classList.contains(ind.slot)){
  index.innerText = ind.name;
}

现在你有另一个问题： div 不是按顺序创建的。 首先，您正在为插槽 2 创建 div，然后为插槽 1 创建 div。 文本插入正确，但插槽顺序错误。 如果你把people改成这样，它应该会再次起作用：

const people = [
  {name: 'Tim', slot: 'one'},
  {name: 'Tom', slot: 'two'}
];

如果您希望元素自动排序，您可以更改people数组以使用数字作为插槽。 这样，您可以对它们进行排序：

var people = [
  {name: 'Tom', slot: 2},
  {name: 'Tim', slot: 1}
];

people.sort((personA, personB) => {
  return personA.slot - personB.slot
});

通过这些更改，您的代码现在应该可以工作了。 这是一个工作片段：

 const body = document.querySelector('body'); var people = [ {name: 'Tom', slot: 2}, {name: 'Tim', slot: 1} ]; people.sort((personA, personB) => { return personA.slot - personB.slot }); const createDiv = (arg) => { const div = document.createElement('div'); div.classList.add('name', arg.slot); body.append(div); const namesClass = document.querySelectorAll('.name'); people.forEach((ind)=>{ namesClass.forEach((index)=>{ if(index.classList.contains(ind.slot)){ index.innerText = ind.name; }; }); }); return div; } const render = () => { people.forEach(function(index){ createDiv(index); }); } render();