javascript - 使用Jquery和Ajax的手风琴列表(Accordion List Using Jquery and Ajax)

Question

I'm Trying to Implement an accordion list.(我正在尝试实现手风琴清单。)

So basically this a bootstrap accordion.(所以基本上这是一个自举手风琴。) The title of the accordion is already set by PHP.(PHP已设置了手风琴的标题。) When the user clicks the accordion it must display list of the session that is coming from server.(当用户单击手风琴时，它必须显示来自服务器的会话列表。) I am using an ajax call for this, the issue every time I click the accordion only first elements get the results.(我为此使用ajax调用，每次单击手风琴时都出现此问题，只有第一个元素才能获得结果。) Other elements didn't get the result just a blank view is displayed.(其他元素未获得结果，仅显示空白视图。) I am fairly new to jquery.(我对jQuery相当陌生。) Here is my Html Code(这是我的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> This is my Jquery and ajax code(这是我的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> Really appricate your help(真的请您帮忙)   ask by Rohit Jain translate from so

Answer 1

You need to give your sessionlists unique ids aswell.(您还需要为会话列表提供唯一的ID。)

Because when you append your myhtmlstring to #sessionlist it only ever takes the first one.(因为当您将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> then you can append it to the right sessionlist in your ajax success:(然后可以将其添加到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) { 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>