jquery - html元素为空时如何获取加载gif并在不为空时删除？

Question

我有一个非常简单的搜索，我希望在加载时搜索以获取加载图像。

<div id="search-filters">
    <button class="search">Search</button>
</div>
<div id="loading"></div>
<div id="results"></div>

只有当 s 为空时，我才在单击#search按钮时获取加载图像div#result，然后当 div#results 有一些内容时隐藏#loading。

这就是我所做的：

       $("#search").click(function() {
            if($.trim($("#results").html())=='') {
                $('#loading').show();
            }
            else if ($('#results:not(:empty)').length) {    
                $('#loading').hide();
            }
        });

但问题是，在我得到结果后，#loading 没有.hide()，为什么？
我哪里出错了？
感谢您的任何帮助！

Answer 1

我猜想 ajax 或类似的东西用于搜索，你必须等待它完成：

$("#search").on('click', function() {
    $('#loading').toggle( $("#results").is(':empty') );

    $.ajax({
        url : 'search.php', 
        data: this.value
    }).done(function(data) {
        $('#results').html(data);
    }).always(function() {
        $('#loading').hide();
        if ( $("#results").is(':empty') ) $('#results').html('No results !');
    });
});

Answer 2

你不需要else if条件

尝试这个 -

$("#search").click(function() {
            if($.trim($("#results").html())=='') {
                $('#loading').show();
            }
            else{    
                $('#loading').hide();
            }
});