Javascript 使用Jquery和Ajax的手风琴列表

我正在尝试实现一个手风琴列表。所以基本上这是一个自举手风琴。手风琴的标题已经由PHP设置。当用户单击手风琴时，它必须显示来自服务器的会话列表。我使用的是ajax调用，每次单击accordion时，只有第一个元素得到结果。其他元素没有得到结果，只是显示了一个空白视图。我对jquery相当陌生。这是我的Html代码

<div class="accordion" id="myAccordion">
    <?php foreach($modules as $module): ?>
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button id="<?php echo $module->id;?>" type="button" class="btn" data-toggle="collapse"
                    data-target="#collapse<?php echo $module->id; ?>"><?php echo $module->module_name; ?></button>
            </h2>
        </div>
        <div id="collapse<?php echo $module->id; ?>" class="collapse" aria-labelledby="headingOne"
            data-parent="#myAccordion">
            <div class="card-body">
                <ul id="sessionlist" class="list-group list-group-flush">
                    <li class="list-group-item">
                        <i class="icon-play_circle_outline text-blue"></i><a href="#">'+data[i].session_name+'</a>' +
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

您还需要为会话列表提供唯一的ID。因为当您将myhtmlstring附加到#sessionlist时，只会使用第一个

<ul id="sessionlist<?php echo $module->id; ?>" class="list-group list-group-flush">
   <li class="list-group-item">
     <i class="icon-play_circle_outline text-blue"></i><a href="#">'+data[i].session_name+'</a>' +
   </li>
</ul>

您还需要为会话列表提供唯一的ID。因为当您将myhtmlstring附加到#sessionlist时，只会使用第一个

<ul id="sessionlist<?php echo $module->id; ?>" class="list-group list-group-flush">
   <li class="list-group-item">
     <i class="icon-play_circle_outline text-blue"></i><a href="#">'+data[i].session_name+'</a>' +
   </li>
</ul>

这是否回答了您的问题？“已看到”在我的情况下不起作用我正在尝试加载按钮上的数据单击不尝试加载整个AccordionKay然后请添加您的静态代码以便我们可以轻松找到问题。这是否回答了您的问题？“已看到”在我的情况下不起作用我正在尝试加载按钮上的数据单击“不尝试加载整个AccordionKay”，然后请将静态代码添加到中，以便我们可以轻松发现问题。它起作用，但将重复列表项添加到我的代码中。如何删除？您可以使用$（“#sessionlist”+currentModuleId）.html（$.parseHTML（myhtmlstring））；而不是附加。然后重置内部HTML而不是附加到itusing。HTML（）将只添加循环的最后一个元素。相反，我使用了$（“button”）.one（'click'，function（）{}）；或者您可以离开它，在for循环开始之前清除它。请参阅我的更新答案@RohitJainIt正在工作，但将重复列表项添加到我的代码中。如何删除？您可以使用$（“#sessionlist”+currentModuleId）.html（$.parseHTML（myhtmlstring））；而不是附加。然后重置内部HTML而不是附加到itusing。HTML（）将只添加循环的最后一个元素。相反，我使用了$（“button”）.one（'click'，function（）{}）；或者您可以离开它，在for循环开始之前清除它。见我的更新答案@RohitJain
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            const currentModuleId = this.id
            $.ajax({
                url: "<?php echo base_url(); ?>dashboard/displaysession/" + currentModuleId ,
                type: 'GET',
                data: {},
                error: function () {
                    alert('Something is wrong');
                },
                success: function (data) {
                    $("#sessionlist" + currentModuleId ).html("");
                    for (var i = 0; i < data.length; i++) {
                        var myhtmlstring = '<li class="list-group-item">' +
                            '<i class="icon-play_circle_outline text-blue"></i><a href="#">' +
                            data[i].session_name + '</a>' +
                            '</li>';
                        console.log($.parseHTML(myhtmlstring));
                        $("#sessionlist" + currentModuleId ).append($.parseHTML(myhtmlstring));
                    }
                },
                dataType: 'json'
            });
        });
    });

</script>