主页 / 问题 / 992774
Accepted
Alisa Bondarchuk
Asked:2020-06-14 20:27:40 +0000 UTC2020-06-14 20:27:40 +0000 UTC

如何添加课程？

  • 772

我有一个创建下拉列表的代码。我需要根据这个按钮的id所在的数组给每个按钮添加一个类。那些。数组“A”和“B”中的按钮需要添加类“A”和“B”，而数组“C”和“D”中的按钮可以添加一个公共类。

    const A = [
      { category: "Walls", id: "1", symbol: "Wall_102", family: "Basic Walls" },
      { category: "Walls", id: "2", symbol: "Wall-Ext_102", family: "Basic Walls" }
    ];
    const B = [
      {
        category: "Window",
        id: "3",
        symbol: "Window-Ext_102",
        family: "Basic Window"
      },
      {
        category: "Walls",
        id: "4",
        symbol: "Wall-Other-102",
        family: "Other Walls"
      }
    ];
    const C = [
      { category: "Walls", id: "5", symbol: "Wall-Ext_102", family: "Basic Walls" },
      { category: "Floor", id: "6", symbol: "Floor-Ext_102", family: "Basic Floor" }
    ];
    const D = [
      { category: "Walls", id: "5", symbol: "Wall-Ext_102", family: "Basic Walls" },
      { category: "Walls", id: "6", symbol: "Wall-Ext_102", family: "Basic Walls" }
    ];

    const data = [...A, ...B, ...C, ...D];

    const result = data.reduce(
      (acc, curr) => {
        const { category, family, symbol, id } = curr;
        acc.category[category] = acc.category[category] || { family: {} };
        acc.category[category].family[family] = acc.category[category].family[
          family
        ] || { symbol: {} };
        acc.category[category].family[family].symbol[symbol] = acc.category[
          category
        ].family[family].symbol[symbol] || { id: [] };
        acc.category[category].family[family].symbol[symbol].id.push(id);
        return acc;
      },
      { category: {} }
    );

    let html = "";

    for (let categoryKey in result.category) {
      html += `<details><summary>${categoryKey}</summary>`;

      for (let familyKey in result.category[categoryKey].family) {
        html += `<details><summary>${familyKey}</summary>`;

        for (let symbolKey in result.category[categoryKey].family[familyKey]
          .symbol) {
          let btn =
            result.category[categoryKey].family[familyKey].symbol[symbolKey];
          html += `<details><summary>${symbolKey}</summary>
            ${btn.id.map(id => `<button>${id}</button>`).join("")}
            </details>
            `;
        }
        html += `</details>`;
      }
      html += `</details>`;
    }

    document.body.innerHTML = html;

javascript

1 个回答

  1. Best Answer

    我在有更改的地方留下了评论，其余的我没有触及（我希望我正确理解了任务）：

    const A = [
  { category: "Walls", id: "1", symbol: "Wall_102", family: "Basic Walls" },
  { category: "Walls", id: "2", symbol: "Wall-Ext_102", family: "Basic Walls" }
];
const B = [
  {
    category: "Window",
    id: "3",
    symbol: "Window-Ext_102",
    family: "Basic Window"
  },
  {
    category: "Walls",
    id: "4",
    symbol: "Wall-Other-102",
    family: "Other Walls"
  }
];
const C = [
  { category: "Walls", id: "5", symbol: "Wall-Ext_102", family: "Basic Walls" },
  { category: "Floor", id: "6", symbol: "Floor-Ext_102", family: "Basic Floor" }
];
const D = [
  { category: "Walls", id: "5", symbol: "Wall-Ext_102", family: "Basic Walls" },
  { category: "Walls", id: "6", symbol: "Wall-Ext_102", family: "Basic Walls" }
];

/* Добавляем каждому объекту название своего класса */
A.forEach( (e)=> {e.class = 'A'});
B.forEach( (e)=> {e.class = 'B'});
[...C, ...D].forEach( (e)=> {e.class = 'CD'});

const data = [...A, ...B, ...C, ...D];

const result = data.reduce(
  (acc, curr) => {
    const { category, family, symbol, id } = curr;
    acc.category[category] = acc.category[category] || { family: {} };
    acc.category[category].family[family] = acc.category[category].family[
      family
    ] || { symbol: {} };
    acc.category[category].family[family].symbol[symbol] = acc.category[
      category
    ].family[family].symbol[symbol] || { id: [] };
    acc.category[category].family[family].symbol[symbol].id.push(id);
    /* Рядом с id записываем и класс */
    acc.category[category].family[family].symbol[symbol].class = curr.class; 
    return acc;
  },
  { category: {} }
);

let html = "";

for (let categoryKey in result.category) {
  html += `<details><summary>${categoryKey}</summary>`;

  for (let familyKey in result.category[categoryKey].family) {
    html += `<details><summary>${familyKey}</summary>`;

    for (let symbolKey in result.category[categoryKey].family[familyKey]
      .symbol) {
      let btn =
        result.category[categoryKey].family[familyKey].symbol[symbolKey];
        html += `<details><summary>${symbolKey}</summary>
          <button class="${result.category[categoryKey].family[familyKey].symbol[symbolKey].class}">
          ${btn.id.map(id => `${id}</button>`).join("")}</details>`;
    /*Выше добавлен кусок для классов*/
    }
    html += `</details>`;
  }
  html += `</details>`;
}

document.body.innerHTML = html;
    details {margin-left: 15px;}

    Ps 你Wall-Ext_102里面的按钮错了。目前尚不清楚，根据这个想法，应该有一个，或者 4 个。

    • 1

相关问题