Question

我正在尝试使用返回的 AJAX 数据动态创建一系列引导卡。 AJAX 请求带回 12 个数组（请参阅 screenshot），但是当我尝试遍历它们并将它们放在卡片上时，只有 1 个数组放在所有十二张卡片上（请参阅 screenshot）

我不确定我的循环做错了什么，但希望有人能帮忙。

这是 JS 代码（对于卡片创建的超长行感到抱歉 - 有关如何缩短的任何建议将不胜感激）。

下面是一个可重现的示例（实际数据变量由我代码中的 AJAX 调用填充），这里是 JSFiddle：

data = [["The Old Milk Bar", "  144 Dundas Street, Thornbury", "Lorem Ipsum"], ["Little Henri", "  848  High Street, Thornbury", 'Lorem Ipsum'], ["Northern Soul", "  843 High Street, Thornbury", "Lorem Ipsum"]]

window.addEventListener('load', (event) => {
    console.log('page is fully loaded');
    test(data)
    });
    
const test = function(data) {
  console.log(data)
  for (i = 0; i < data.length; i++) {
    var results = JSON.stringify(data).split('"');
    var cafeName = results[1].replace(/[^a-zA-Z0-9éè ]/g, "");
    console.log(cafeName)
    var cafeAddress = results[3].replace(/[^a-zA-Z0-9éè ]/g, "") + "," + results[2].replace(/[^a-zA-Z0-9éè ]/g, "");
    console.log(cafeAddress)
    var cafeDescription = results[5];
    console.log(cafeDescription)
    $(".venue-name").html(cafeName);
    $(".venue-address").html(cafeAddress);
    $(".venue-description").html(cafeDescription);
    $(".share").html('<i class="fas fa-share-alt"></i>');
    $(".venue-options").html('<i class="fas fa-ellipsis-h"></i>');
    var myCol = $('<div id="col"></div>');
    var myPanel = $(
      '<div class="card-group"><div class="card card-block m-3 overflow-auto" style="width: 18rem;"><div class="card-body"><h5 class="card-title venue-name"></h5><h6 class="card-subtitle mb-2 text-muted venue-address"></h6><div class="dropdown"><div class="venue-options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div><div class="dropdown-menu" aria-labelledby="dropdownMenuButton"><a id="share" class="dropdown-item" href="#">Share</a><a id="addToList" class="dropdown-item" href="#">Add to List</a></div></div><div class="venue-description"></div></div></div></div>'
    );
    myPanel.appendTo(myCol);
    myCol.appendTo('#cardList');
  };
}

Answer 1

您不需要调用 JSON.stringify() 和 split()。你已经有了一个数组，你可以直接访问它的元素。

当您执行 $(".venue-name").html(cafeName) 时，您正在使用该类设置 all 元素的 HTML，而不是您正在创建的卡片。实际上，它会将所有除了设置为新的，因为直到这些行之后才添加。

相反，首先创建 myPanel，然后设置该 DIV 中元素的 HTML。您可以使用 myPanel.find(".className") 或等效的 $(".className", myPanel) 执行此操作。

data = [
  ["The Old Milk Bar", "  144 Dundas Street, Thornbury", "Lorem Ipsum"],
  ["Little Henri", "  848  High Street, Thornbury", 'Lorem Ipsum'],
  ["Northern Soul", "  843 High Street, Thornbury", "Lorem Ipsum"]
]

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
  test(data)
});

const test = function(data) {
  console.log(data)
  data.forEach(([cafeName, cafeAddress, cafeDescription]) => {
    var myCol = $('<div id="col"></div>');
    var myPanel = $(
      `
      <div class="card-group">
        <div class="card card-block m-3 overflow-auto" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title venue-name"></h5>
            <h6 class="card-subtitle mb-2 text-muted venue-address"></h6>
            <div class="dropdown">
              <div class="venue-options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"><a id="share" class="dropdown-item" href="#">Share</a><a id="addToList" class="dropdown-item" href="#">Add to List</a></div>
            </div>
            <div class="venue-description"></div>
          </div>
        </div>
      </div>`
    );
    $(".venue-name", myPanel).html(cafeName);
    $(".venue-address", myPanel).html(cafeAddress);
    $(".venue-description", myPanel).html(cafeDescription);
    $(".share", myPanel).html('<i class="fas fa-share-alt"></i>', myPanel);
    $(".venue-options", myPanel).html('<i class="fas fa-ellipsis-h"></i>');
    myPanel.appendTo(myCol);
    myCol.appendTo('#cardList');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cardList"></div>

如何遍历数组中的数组？

1 个答案: