通过使用JavaScript遍历数组元素来动态添加可折叠div [英] Dynamically adding collapsible divs by looping through array elements with JavaScript

问题描述

我正在尝试使用JavaScript遍历数组并将可折叠div附加到可折叠set div.我有它的工作，但不知道发生了什么.我搜索了stackoverflow，但找不到直接答案.我还使用了控制台，我可以获取数组中的每个值以显示在控制台中.

I am trying to use JavaScript to loop through an array and append collapsible divs to a collapsible set div. I had it working and but not sure what happened. I searched stackoverflow but wasn't able to find an direct answer. I also used the console and I can get each value in the array to appear in the console.

我正在尝试显示一周中的每一天，以便用户可以单击一天以查看时间列表.目前，我的代码仅使星期一显示为标题，然后可以单击并展开.展开后，它将显示一周中的其余时间.我猜我做事的顺序有问题.

I'm trying to get each day of the week to appear so users can click on the day to see a list of times. Currently, my code causes only monday to appear as a heading that can then be clicked on and expanded. When it is expanded, it shows the rest of the days of the week. I'm guessing that there is something wrong the order of how I'm doing things.

这是我的JavaScript代码:

Here is my javascript code:

$(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.

With this code, what I currently see is Monday with a plus sign, when I click Monday, it expands and I see the rest of the days of the week. What I want is to have each day of the week as an expandable div.

这里是一个链接，所以您可以了解我的意思. http://mbsk8.zerogravity-web.com/index-x.html#ClassTimes

Here is a link so you can see what I mean. http://mbsk8.zerogravity-web.com/index-x.html#ClassTimes

推荐答案

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

You need to create a collapsible inside for or $.each loops. And then append them to collapsible-set and refresh it using .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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！