javascript - 使用 Jquery 和 Ajax 的 Accordion 列表

Question

我正在尝试实现一个 Accordion 列表。所以基本上这是一个引导 Accordion 。 Accordion 的标题已由 PHP 设置。当用户单击折叠面板时，它必须显示来自服务器的 session 列表。我为此使用 ajax 调用，每次单击 Accordion 时，问题都是只有第一个元素才能获得结果。其他元素没有得到结果，只是显示一个空白 View 。我对 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>

这是我的 Jquery 和 ajax 代码

<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $.ajax({
                url: "<?php echo base_url(); ?>dashboard/displaysession/" + this.id,
                type: 'GET',
                data: {},
                error: function () {
                    alert('Something is wrong');
                },
                success: function (data) {
                    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").append($.parseHTML(myhtmlstring));
                    }
                },
                dataType: 'json'
            });
        });
    });

</script>

真诚地感谢您的帮助

Answer 1

您还需要为 session 列表提供唯一的 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>

然后您可以将其附加到 Ajax 成功时的正确 session 列表中:

<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>