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

2wnc66cl  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(121)

问题在函数执行期间/同时需要显示引导微调器。一旦函数完成执行,微调器将不再显示。

下面是一个例子:

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

我的问题是,微调器不显示在所有与上述. FYI,它显示在页面上,如果我删除'显示:none;“从css文件,但我显然不能控制它,然后像是必需的...

我也尝试过我尝试过几种不同的方法来运行代码,但是没有任何运气。其中一种方法是通过使用以下代码。同样,我也没有运气...

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

任何方向都非常感谢。提前感谢

6l7fqoea

6l7fqoea1#

Html(添加了类微调器):

<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');

相关问题