Javascript 基于表值创建可折叠面板

我正在尝试根据表自动创建一个单独的面板。我有一个工作列表，我希望面板标题是我的jobName字段，我希望面板内容是我的jobDescription字段。我们有大约30个工作，我需要显示，而不是编码每个面板，我想使用javascript自动创建每个面板。工作会发生变化，我们的员工知道如何更新工作，但我试图在引导面板中显示它们

我对java脚本还不熟悉，我尝试过的所有东西都不起作用

下面是我试图自动完成的内容

我假设您的数据存储在一个远程位置，允许第三方进行编辑，如果您的页面上有引导，那么您使用的是jQuery

首先，您需要某种方法将远程数据传送到客户端。jQuery有一些方便的方法来实现这一点。如果您的数据可以JSON格式访问，您可以查看一下，否则您将不得不摆弄

然后，您所要做的就是通过执行一些操作并将结果附加到容器中，将数据放在页面上。如果标记正确，引导手风琴功能应该是现成的

---

这是我在没有看到一些代码或不了解您的实现的情况下所能得到的最具体的结果，但这将是实现您想要的目标的一般方法。

您需要一个包含作业名称和作业描述的某种列表。这可以存储在JSON或数组中。然后，通过循环遍历数据，您可以动态地将每个面板附加到accordion容器中，方法是首先为每个面板构建html字符串，并附加JobName和jobDescriptions。我在JSFIDLE上做了一个例子-`

var jobList=[“Job1”、“Job2”、“Job3”、“Job4”、“Job5”]；
var html=“”
$.each（作业列表、函数（索引、值）{
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“Lorem ipsum door sit amet，concetetur adipising elit，”；
html+=“我们的劳动和生活都是临时性的，我们的生活是最低限度的”；
html+=“ullamco实验室在普通消费品上的实习。”；
html+=“”；
html+=“”；
});
$（“#手风琴”）.append（html）；
`

如果要动态创建，则需要数据库，否则。除了我提到的方法之外，它也是可能的。你需要为这30个工作创建一个forloop，然后在其中显示记录。好的，我在我的项目中得到了这个结果（非常感谢你，顺便说一句，我没有朝这个方向前进）。理论上，我应该能够从数据库“jobName”中输入字段名，其中您有[“Job1”、“Job2”等]，标题应该从Job1、Job2等更改为IT专家、ACS主管等。

        <div class="panel-group" id="accordion">

        </div> 


    <script>

        var jobList = ["Job1", "Job2", "Job3", "Job4", "Job5"];
        var html = ""

        $.each(jobList, function (index, value) {

            html += "<div class=\"panel panel-default\">";
            html += "       <div class=\"panel - heading\">";
            html += "           <h4 class=\"panel - title\">";
            html += "               <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse"+index+1+"\">"+value+"</a>";
            html += "           </h4>";
            html += "       </div>";
            html += "       <div id=\"collapse"+index+1+"\" class=\"panel - collapse collapse\">";
            html += "           <div class=\"panel - body\">Lorem ipsum dolor sit amet, consectetur adipisicing elit,";
            html += "               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,";
            html += "               quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>";
            html += "       </div>";
            html += "   </div>";

        });

        $("#accordion").append(html);

    </script>`