在 Accordion 中显示数组列表？

Question

我有一个不同时间的数组。如何显示数组元素，如下图所示。

const doctorSchedule =["08:00","08:10","08:20","08:30","08:40","08:50","09:00","09:10","09:20","09:30","09:40","09:50","10:00","10:10","10:20","10:30","10:40","10:50",]

Answer 1

您可以通过根据小时将时间段放入存储桶中来减少时间段。 将它们分组后，您可以遍历条目并为每小时创建手风琴项，并为小时桶中的每个时间段生成单选按钮。

 const doctorSchedule = [ "08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00", "09:10", "09:20", "09:30", "09:40", "09:50", "10:00", "10:10", "10:20", "10:30", "10:40", "10:50", ]; const slots = doctorSchedule.reduce((acc, time) => ((hour) => ({ ...acc, [hour]: [...(acc[hour] ?? []), time] })) (parseInt(time.split(':')[0], 10)), {}); $('.accordion').append(Object.entries(slots).map(([hour, times]) => $('<div>') .addClass('accordion-item') .append($('<h2>') .addClass('accordion-header') .attr('id', `heading-${hour}`) .append($('<button>') .addClass('accordion-button collapsed') .prop('type', 'button') .attr('aria-expanded', 'true') .attr('aria-controls', 'collapseOne') .attr('data-bs-toggle', 'collapse') .attr('data-bs-target', `#collapse-${hour}`) .text(`${(hour + '').padStart(2, '0')}:00`))) .append($('<div>') .addClass('accordion-collapse collapse') .attr('id', `collapse-${hour}`) .attr('aria-labelledby', `#heading-${hour}`) .append($('<div>') .addClass('accordion-body') .append(times.map(time => $('<div>') .addClass('form-check form-check-inline') .append($('<input>') .addClass('form-check-input') .prop('type', 'radio') .attr('name', 'time-slot')) .append($('<label>') .addClass('form-check-label') .text(time)) ))))));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="container"> <div class="accordion" id="accordionExample"></div> </div> <!-- Notes: * https://getbootstrap.com/docs/5.0/components/accordion/ * https://getbootstrap.com/docs/5.0/forms/checks-radios/ -->