javascript 我尝试在.append()中使用for循环来动态创建一系列按钮/项

t0ybt7op 于 2023-05-16 发布在 Java

关注(0)|答案(2)|浏览(193)

我希望动态地（通过jSon、XML、静态数组等提供的数据）构建一系列div，这些div最终包含锚标记（或按钮），其中包含图像。
这是我目前掌握的情况：

$(document).ready(function () {
            let testButtonEntries = [
                { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'insertsomelinkhere' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title Last', button_alt_text: 'Employee Alt Text Last', button_image: 'emp_button_title_last', link: 'insertsomelinkhere.org' }
            ];

            for (let sections = 0; sections <= testButtonEntries.length % 15; sections++) {
                $('<div class="carousel-item">')
                    .append($('<div class="d-flex flex-wrap"/>').append(function () {
                        for (let i = 0; i < 15; i++) {
                            return $('<div/>')
                                .append($('<a/>', {
                                    href: testButtonEntries[i].link,
                                    title: testButtonEntries[i].button_title,
                                    target: '_blank'
                                }).append($('<img/>', {
                                    alt: testButtonEntries[i].button_alt_text,
                                    class: 'img-responsive',
                                    src: 'images/' + testButtonEntries[i].button_image + '.png'
                                })));
                        }
                    }))
                    .appendTo($('#employee-button-container'));
            }
        });

它产生了我想要的结果，但是（因为很明显return语句会返回第一个结果，这是一个 Package ）它没有在第一部分中给我15个“按钮”，在第二部分中给我一个我正在努力的按钮。

JavaScript

来源：https://stackoverflow.com/questions/76233020/im-trying-to-use-a-for-loop-inside-of-an-append-to-dynamically-create-a-seri

2条答案

按热度按时间

i86rm4rw1#

我们可以使用slice方法将主数组划分/拆分为单独的数组块（每个块有15个元素），并使用map构建HTML

const rows = [];
    const size = 15;

    while (testButtonEntries.length > 0){
      rows.push(testButtonEntries.splice(0, size));
    }

    const data = rows.map((row) => {
      const elements = row.map((ele) => {
        const { button_title, link, button_image, button_alt_text } = ele;
        return `<div class=""><a href="${button_image}" title="${button_title}" target="_blank"><img src="images/${button_image}"  class="img-responsive" alt="${button_alt_text}"/></a></div>`;
      });
      return `<div class="carousel-item"><div class="d-flex flex-wrap">${elements}</div></div>`;
    });
    $("#employee-button-container").html(data);
  });

赞(0）回复(0）举报 2023-05-16

iqjalb3h2#

这是我一直在寻找的答案（只需要睡在它LOL）

$(document).ready(function () {
   let testButtonEntries = [
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'insertsomelinkhere' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title Last', button_alt_text: 'Employee Alt Text Last', button_image: 'emp_button_title_last', link: 'insertsomelinkhere.org' }
   ];

   let sectionStart = 0;
   let sectionEnd = 15;

   for (let sections = 0; sections < (Math.ceil(testButtonEntries.length / 15)); sections++) {
      $('<div class="carousel-item">')
         .append($('<div class="d-flex flex-wrap"/>').append(function () {
            let sectionButtons = '';

            for (let sectionItems = sectionStart; sectionItems < sectionEnd; sectionItems++) {
               let formedButton = $('<div/>')
                  .append($('<a/>', {
                     href: testButtonEntries[i].link,
                     title: testButtonEntries[i].button_title,
                     target: '_blank'
                  }).append($('<img/>', {
                     alt: testButtonEntries[i].button_alt_text,
                     class: 'img-responsive',
                     src: 'images/' + testButtonEntries[i].button_image + '.png'
                  })));

                  sectionButtons += formedButton[0].outerHTML;
             }

             return sectionButtons;
          }))
         .appendTo($('#employee-button-container'));

      sectionStart = sectionEnd;
      sectionEnd = sectionEnd + 15;
   }
});

在我最初的回答中，我使用的是模数，这绝对是错误的（再次...显然需要睡眠，哈哈），以获得建立按钮组所需的通行证数量。相反，我只是使用Math.ceil（）来舍入返回的任何数字，这样我就有了正确的通道数来创建每个部分。至于将按钮/链接本身附加到每个部分，我需要创建一个变量来保存所有15个正在构建的按钮/链接，然后让函数返回变量作为append（）的部分。而且......这就是我拍摄的方式。：）

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 我尝试在.append()中使用for循环来动态创建一系列按钮/项

2条答案

相关问题

热门标签

最新问答