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();
});

Answer 2

它隐藏的问题是什么？我认为隐藏需要在AJAX调用的成功函数内，而不是在它之后。

例如

$.ajax({
    success: function() {
        $loading.hide();    
    }
});

jquery无法显示和隐藏元素

2 个答案: