Question

我正在尝试使用JavaScript循环遍历数组并将可折叠div添加到可折叠的set div。我有它的工作，但不知道发生了什么。我搜索了stackoverflow，但无法找到直接的答案。我也使用了控制台，我可以让数组中的每个值出现在控制台中。

我试图让每周的每一天都出现，以便用户可以点击当天查看时间列表。目前，我的代码仅导致星期一作为标题出现，然后可以单击并展开。当它被扩展时，它显示了一周中的其余时间。我猜我做事的顺序有些不对。

这是我的javascript代码：

$(document).on("pagebeforeshow","#ClassTimes",function(){
  $("#classList").empty();
  var collapsibleSet = $("#classList");
  var collapsible = $('<div data-role="collapsible"></div>');
  for (i=0; i<showPrice.length; i++) {
    var maki = showPrice[i].day;
    collapsible.append("<h2>" + maki + "</h2>");
  }
  collapsibleSet.append(collapsible);
  collapsibleSet.trigger('create');
});

使用此代码，我目前看到的是带有加号的星期一，当我点击星期一时，它会扩展，我会看到一周中剩下的几天。我想要的是让一周中的每一天都成为可扩展的div。

这是一个链接，你可以看到我的意思。 http://mbsk8.zerogravity-web.com/index-x.html#ClassTimes

Answer 1

您需要在中为或$.each循环创建可折叠。然后将它们附加到 collapsible-set 并使用.collapsibleset()进行刷新。

var collapsible = '';

$.each(showPrice, function (i, v) {
  collapsible += "<div data-role='collapsible'><h1>" + v.day + "</h1><p>contents</p></div>";
});

$("#classList").append(collapsible).collapsibleset();

<强> Demo

通过使用JavaScript循环遍历数组元素来动态添加可折叠div

1 个答案: