使用 ajax 维护 Bootstrap 手风琴的状态

Question

我正在使用 ajax 从 API 接收数据，该 API 每秒执行一次。为了在 Web 界面中显示数据，每次更新都会重写带有包含数据的引导手风琴的 HTML 代码。我想使用手风琴，以便用户可以决定何时何地查看详细信息。每秒重写手风琴的 HTML 代码的原因，状态也每次都会被覆盖，并且它将独立于当前状态折叠/显示。有没有一种保存当前状态并且只更新手风琴内部数据的好方法？

我尝试在从最后一次传递中删除 HTML 代码之前打开类内部的状态，并插入状态为“显示”或“”的类以维持状态（“状态显示 [d]”），但它没有找到具有 ID ('collapse' + d) 的元素。当相同的代码在 .always 中时，不会发生此问题，但是（我猜 .always 在 .done 之后立即执行）它不起作用。

let statusShow = ['show', 'show', 'show', 'show']

function getInput() {
    $.ajax({
        url : "./Input",
        type : 'POST'
    })


        .done((data) => {


            let dataJson = JSON.parse(data.replace(/\\'/g, "'"))

                      
            // The code I tried graping the state of last pass through
            for (let d = 0; d < data_length; d++) {
                let classShow = document.getElementById('collapse' + d).className

                if (classShow.includes('show')){
                    statusShow[d] = 'show'
                }
                else {
                    statusShow[d] = ''
                }



            $("#accordionChar").html('')

            for (let d = 0; d < data_length; d++) {

                $("#accordionChar").append(`

                    <div class="accordion-item `+ changeBgColor(dataJson) +` border                                                                    border-dark">
                        <h2 class="accordion-header border border-dark" id="heading` + d + `">
                            <button class="accordion-button collapsed `+ changeBgColor(dataJson) +` fw-bolder text-dark" type="button"
                                data-bs-toggle="collapse" data-bs-target="#collapse` + d + `"
                                aria-expanded="false" aria-controls="collapse` + d + `">
                                Characteristic `
                                + d + 
                            `</button>
                        </h2>
                        <div id="collapse` + d + `" class="accordion-collapse collapse `**+ statusShow[d] +**`"
                            aria-labelledby="heading` + d + `">
                            <div class="accordion-body">
                            <div class="row" id="table_info` + d + `">
                            </div>
                            <div class="row" id="table_content` + d + `">
                            </div>
                            </div>
                        </div>
                    </div>`)

                // Appends data to the accordion body
                makeTable(data, d)
                
            }
        })

        .fail((data) => {

        })

        .always((data) => {

            setTimeout(function() {
                getInput();
            }, 1000);
    });
};

HTML：

<div class="accordion accordion-flush" id="accordionChar">

</div>

Answer 1

通过单击每个手风琴按钮更新状态来解决它。

function updateShow(d) {

    if (statusShow[d] === '') {
        statusShow[d] = 'show'
        collapsed[d] = ''
    }
    else {
        statusShow[d] = ''
        collapsed[d] = 'collapsed'
    }
    
}