Question

长话短说，我试图在Ajax成功函数中隐藏一个div，具体取决于它是否可见。但不明白为什么它不起作用。我可以将它设置为简单隐藏，但是当我检查时，它会在控制台中发现它会将div设置为display:none，即使它已被隐藏。

JS

$(document).ready(function() {
            $('#loading').show();
            setInterval(function () {
                $.ajax({
                    type: "GET",
                    url: "generate_list.php",
                    success: function (result) {
                        //$('#loading').hide();
                        $('#loading:visible').hide();

                        if(result != '') {
                            $('#empty_storage').hide();
                            $('#file_list').html(result);
                        }
                        else {
                            $('#file_list').html('');
                            $('#empty_storage').show();
                        }
                    }
                });
            }, 1700);
        });

Answer 1

切换可见性

select: function (e, ui) {
     $project.val("");
     createTag(ui.item.label, ui.item.id);
}

CSS：最初将隐藏加载程序

   $(document).ready(function() {
        $('#loading').css('visibility': 'visible');
        setInterval(function () {
            $.ajax({
                type: "GET",
                url: "generate_list.php",
                success: function (result) {

                   if ($('#loading').css('visibility') == 'visible') {
                       $('#loading').css('visibility','hidden'); 
                    }

                    if(result != '') {
                        $('#empty_storage').hide();
                        $('#file_list').html(result);
                    }
                    else {
                        $('#file_list').html('');
                        $('#empty_storage').show();
                    }
                }
            });
        }, 1700);
    });

如果要检查可见性，请使用visibility属性。但是，如果您想使用 .hide（）或 .show（），那么它取决于显示属性

可见性：http://www.w3schools.com/cssref/pr_class_visibility.asp

展示：http://www.w3schools.com/cssref/pr_class_display.asp

示例演示：https://jsbin.com/jiluren/11/edit?html,css,js,output

希望这会有所帮助。谢谢！

Answer 2

您的问题可能是您错放了显示加载指示符的调用。在开始$('#loading').show();迭代之前，您只需调用setInterval一次。因此，当您#loading第一次被隐藏时，它将永远隐藏起来。您应该在每次$('#loading').show();来电之前致电ajax。

$(document).ready(function() {
            setInterval(function () {
                $('#loading').show();
                $.ajax({
                    type: "GET",
                    url: "generate_list.php",
                    success: function (result) {
                        //$('#loading').hide();
                        $('#loading:visible').hide();

                        if(result != '') {
                            $('#empty_storage').hide();
                            $('#file_list').html(result);
                        }
                        else {
                            $('#file_list').html('');
                            $('#empty_storage').show();
                        }
                    }
                });
            }, 1700);
        });

另请注意，对于此类 loading 指示，最好将其隐藏在always返回的承诺的$.ajax回调中。这样，当发生错误时，加载面板也将被隐藏，并且不会调用成功回调。我的意思是像你这样的东西。

$("#loading").show();
$.ajax({ ... })
 .always(function() {
    $("#loading").hide();    
  });

Answer 3

如果我理解你的要求，你需要在ajax调用之前显示加载图标并在ajax调用完成后隐藏它

在这种情况下，有预定义的回调函数avialable

beforeSend: function (xhr) {
     $("#loaderforsearch").show()
    },

                    complete: function()
                    {
                       $("#loaderforsearch").hide();
                    },

检查在ajax成功函数内部工作的div的可见性

3 个答案: