javascript - jquery 无法显示和隐藏元素

Question

我有div元素为

<div class="preview-image hide"><img src="{{STATIC_URL}}ui-anim_basic_16x16.gif"></div>

hide类属于 Twitter Bootstrap 2.3.2，preview-image基本上向元素添加一些样式并用作 JavaScript 的句柄。

我有如下 jQuery 代码，其中

$loading.show()和 $loading.hide()不工作。

令人惊讶的是，当我运行 $preview.parent().find('.preview-image').show() 时从控制台，它的工作!

(function($) {
$(document).ready(function() {

    var SET_TIME = 6000;

    $('[data-preview]').click(function() {
        var $this = $(this);
        var $preview = $('#' + $this.data('presponse'));
        var $loading = $preview.parent().find('.preview-image');
        $loading.show();

        $.ajax({

        });

        $loading.hide(); 
    });
});
})(window.jQuery);

Answer 1

因为 $.ajax() 是一个异步调用，所以 $loading.hide() 在 $loading.show()。为了避免这种情况，您应该在 AJAX 调用完成后进行 $loading.hide() 调用。一种方法是:

var $loading = $preview.parent().find('.preview-image');
$loading.show();

$.ajax({

}).always(function() {
    $loading.hide();
});