在函数中显示和隐藏引导微调器答案

【问题标题】：Display and hide bootstrap spinner within function在函数中显示和隐藏引导微调器
【发布时间】：2022-12-07 20:04:20
【问题描述】：

问题引导微调器需要在函数执行期间/同时显示。函数完成执行后，微调器不应再显示。

我有以下引导元素：

<div id="resultsSpinner" class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>

微调器的 css 如下：

.spinner-border {
    width: 3rem;
    height: 3rem;
    display: none; /* displays nothing initially*/
}

我有以下js：

function doesSomething() {
    //does stuff here
    
    const spinnerBorderEl = document.querySelector('.spinner-border');

    spinnerBorderEl.style.display = 'initial'; //should change the display from none to its initial state, so that it displays
}

我遇到的问题是上面的微调器根本不显示。仅供参考，如果我删除“显示：无；”，它会显示在页面上来自 css 文件，但我显然无法控制它，就像需要的那样......

我也试过我试图以几种不同的方式运行代码，但没有任何运气。其他方法之一是使用以下方法。再一次，我没有运气......

function showLoader() {
        $(".spinner-border").fadeIn();
        };
showLoader();

非常感谢任何指示。提前致谢

【问题讨论】：

标签： javascript html css bootstrap-5

【解决方案1】：

Html（添加类 .spinner）：

<div id="resultsSpinner" class="spinner-border" role="status">
                <span class="spinner spinner-border spinner-border-sm mr-3" role="status" aria-hidden="true">Loading...</span>
</div>

将 css 添加到 css 文件：

.spinner {
    display: none; 
}

body.busy .spinner { display:block !important; }

或者使用可见性：

.spinner { visibility:hidden; } 
body.busy .spinner { visibility:visible !important; }

.js 文件：

$(document).ready( function()
{
  $('.spinner-border').on('click', function()
  {
    $('body').addClass('busy');
  });
});

完成后，执行：

$('body').removeClass('busy');

【讨论】：