使用Jquery和Ajax的手风琴列表

Question

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

您还需要为会话列表提供唯一的 ID。因为当你将myhtml字符串附加到 #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 成功案例中的右侧会话列表：

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