Question

我正在尝试编写一个函数，该函数读取16个对象（其中包含x个链接）并生成包含这些链接的动态动态锚标记。这些对象被命名为linksPage0，linksPage1，linksPage2等。

需要将对象添加到一个数组中，然后该数组需要计算每个对象中的项目数，以确定要生成多少锚，然后再将URL从相关对象添加到div（页面容器）中。 / p>

目前，我已经对单个对象进行了硬编码，以取得一些进展，到目前为止，这种方法还可以：

 var linksPage0 = [
    {"name":"img1", "src":"https://via.placeholder.com/300x300/fdf/000?text=page1"},
    {"name":"img2", "src":"https://via.placeholder.com/300x300/fdf/000?text=page2"},
    {"name":"img3", "src":"https://via.placeholder.com/300x300/fdf/000?text=page3"},
    {"name":"img4", "src":"https://via.placeholder.com/300x300/fdf/000?text=page4"},
    {"name":"img5", "src":"https://via.placeholder.com/300x300/fdf/000?text=page5"},
    {"name":"img8", "src":"https://via.placeholder.com/300x300/fdf/000?text=page8"},
    {"name":"img9", "src":"https://via.placeholder.com/300x300/fdf/000?text=page9"},
    {"name":"img10", "src":"https://via.placeholder.com/300x300/fdf/000?text=page10"},
  ];

  var linksPage1 = [
    {"name":"img1", "src":"https://via.placeholder.com/300x300/fdf/000?text=page1"},
    {"name":"img2", "src":"https://via.placeholder.com/300x300/fdf/000?text=page2"},
    {"name":"img3", "src":"https://via.placeholder.com/300x300/fdf/000?text=page3"},
    {"name":"img4", "src":"https://via.placeholder.com/300x300/fdf/000?text=page4"},
    {"name":"img5", "src":"https://via.placeholder.com/300x300/fdf/000?text=page5"},
    {"name":"img6", "src":"https://via.placeholder.com/300x300/fdf/000?text=page6"},
    {"name":"img7", "src":"https://via.placeholder.com/300x300/fdf/000?text=page7"},
    {"name":"img8", "src":"https://via.placeholder.com/300x300/fdf/000?text=page8"},
    {"name":"img9", "src":"https://via.placeholder.com/300x300/fdf/000?text=page9"},
    {"name":"img10", "src":"https://via.placeholder.com/300x300/fdf/000?text=page10"},
  ];

  var linksPage2 = [
    {"name":"img1", "src":"https://via.placeholder.com/300x300/fdf/000?text=page1"},
    {"name":"img2", "src":"https://via.placeholder.com/300x300/fdf/000?text=page2"},
    {"name":"img3", "src":"https://via.placeholder.com/300x300/fdf/000?text=page3"},
    {"name":"img4", "src":"https://via.placeholder.com/300x300/fdf/000?text=page4"},
    {"name":"img5", "src":"https://via.placeholder.com/300x300/fdf/000?text=page5"},
    {"name":"img6", "src":"https://via.placeholder.com/300x300/fdf/000?text=page6"},
    {"name":"img7", "src":"https://via.placeholder.com/300x300/fdf/000?text=page7"},
    {"name":"img8", "src":"https://via.placeholder.com/300x300/fdf/000?text=page8"},
  ];

var productsCount = [linksPage0.length, linksPage1.length, linksPage2.length];

     var imageContainer = document.getElementsByClassName("card");

      for(var i = 0; i < imageContainer.length; i++){
      imageContainer[i].id  = "pageContainer"+i;
      }

      function generateProductAnchors(){
        var pageContainers = document.getElementById("pageContainer"+i);
        var anchor = document.createElement("a");
        anchor.setAttribute('id', 'product'+i);
        pageContainers[i].appendChild(anchor);
        console.log(cont);
      }

    for(i = 0; i < linksPage0.length; i++){
      generateProductAnchors(i);
    }

我的问题是使循环语句动态化，以便它可以读取所有链接对象（linksPage0.length，linksPage1.length，linksPage2.length），该对象将计算对象中的项目数，并生成正确的定位并将其添加到imageContainers。

这可以用多维数组完成吗？

任何帮助将不胜感激。

Answer 1

是的，您想要一个二维数组。为此，您只需将链接数组添加到外部数组即可。然后循环遍历外部数组（每组链接一次），并在每个外部循环中运行一个处理该组中每个链接的内部循环。

var linksPage0 = [
  {"name":"img1", "src":"https://via.placeholder.com/300x300/fdf/000?text=page1"},
  {"name":"img2", "src":"https://via.placeholder.com/300x300/fdf/000?text=page2"}
];

var linksPage1 = [
  {"name":"img3", "src":"https://via.placeholder.com/300x300/fdf/000?text=page3"},
  {"name":"img4", "src":"https://via.placeholder.com/300x300/fdf/000?text=page4"}
];

var linksPage2 = [
  {"name":"img5", "src":"https://via.placeholder.com/300x300/fdf/000?text=page5"},
  {"name":"img6", "src":"https://via.placeholder.com/300x300/fdf/000?text=page6"}
];

// Collects all links into a 2-dimensional array (and selects cards)
var linksGroups = [linksPage0, linksPage1, linksPage2];
var imageContainers = document.getElementsByClassName("card");

// Loops through outer array
for(let i = 0; i < linksGroups.length; i++){
  let links = linksGroups[i];
  // Assumes there are enough cards to hold all the linksGroups
  //  (Alternatively, you could create the card divs as you go to avoid assuming)
  let container = imageContainers[i];
  container.setAttribute("id","card" + i)

  // Loops through each inner array
  for(j = 0; j < links.length; j++){
    var anchor = document.createElement("a");
    anchor.innerHTML = links[j].name;
    anchor.setAttribute("href", links[j].src);
    container.appendChild(anchor);
    // (Adds line break for demo purposes)
    container.appendChild(document.createElement("br"));
  }
}

.card{ width: 80px; margin: 10px; padding: 5px; border: 1px solid gray}

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Answer 2

由于您有 n 个对象，这些对象都包含基本相同的信息，因此只需指定每个页面中的链接数即可动态生成所需的所有元素。这意味着您可以删除所有这些样板，并且不需要预先指定容器的数量，因为它们也是基于linksPerPage数组的长度生成的。

const linksPerPage = [10, 10, 8];

// A separate function that creates and returns a
// new container element.
function createContainer(index) {
  const container = document.createElement('div');
  container.classList.add('container');
  container.dataset.id = index;
  return container;
}

// We pass in the number of links on the page,
// create an anchor element for each, and push it in
// to an array of anchors for tha page.
// Finally we return the anchors array
function createAnchors(links) {
  const anchors = [];
  for (let link = 1; link <= links; link++) {
    const anchor = document.createElement('a');
    anchor.href = `https://via.placeholder.com/300x300/fdf/000?text=page${link}`;
    anchor.textContent = link;
    anchors.push(anchor);
  }
  return anchors;
}

// Pass in the array containing the number of links per page
// Iterate over the array with `map` and for each container,
// create the anchors and then append them all to the container
// Finally return the container
// You will be left with an array of containers that you can then
// append to the document body (or another element of your choosing)
function generateLinksContainers(linksPerPage) {
  return linksPerPage.map((pages, index) => {
    const container = createContainer(index);
    const anchors = createAnchors(pages);
    anchors.forEach(anchor => container.appendChild(anchor));
    return container;
  });
}

// Iterate over the generated containers and add each to the document
// body
generateLinksContainers(linksPerPage).forEach(container => {
  document.body.appendChild(container);
});

.container { padding: 0.2em }
a { padding: 0.2em; }

使用for循环和数组创建动态锚标记生成器功能

2 个答案: