jQuery 隐藏和显示不起作用

jQuery hide and show from do not work

本文关键字：不起作用 显示 隐藏 jQuery      更新时间：2023-09-26

我在一个事件中有以下内容：

function onclickEvent () {
     $.ajax({
       url: "somePage.html",
       beforeSend: function( xhr ) {   
            $('#Element1').hide("slow",function() {                                                                                                                              
                $('#Loading').show("slow");
            }); 
        }
     }).done(function( data ) {                   
          $('#Loading').hide("slow",function() {                                                                                                                    
             $('#Element1').show("slow");                                                     
          });                                                      
    });
}

第一次效果很好，但是第二次(第二次单击(在"完成"ajax中加载不会隐藏，始终可见。

我做错了什么？

您首先隐藏了 Element1，因此您需要在成功/完成时首先显示它。 show()与hide()配对，反之亦然，似乎将切换基于优先级。这似乎是行为。您可能需要进一步阅读这些函数的文档。

<script src="jquery.min.js"></script>
<script>
function onclickEvent () {          
    $.ajax({
        url: "somePage.html",
        beforeSend: function( xhr ) {   
                $('#Element1').hide("slow",function() {                                                                                                                              
                    $('#Loading').show("slow");
                }); 
        }
    }).done(function( data ) {                   
        $('#Element1').show("slow", function() {
            $('#Loading').hide("slow");
        });
    });
};
</script>
<div id="Element1" style="display:block;">
    Element 1
</div>
<div id="Loading" style="display:none;">
    Loading
</div>
<button onclick="onclickEvent();">Click Me</button>

使用成功

function onclickEvent () {
    $.ajax({
        url: "somePage.html",
        beforeSend: function( xhr ) {   
            $('#Element1').hide("slow",function() {                                                                                                                              
                $('#Loading').show("slow");
            }); 
        },
        success: function( data ) {                   
            $('#Element1').show("slow", function() {
                $('#Loading').hide("slow");
            });
        }
    });
};
看起来有

几件事需要修改才能让它按照我认为您希望它工作的方式工作。

  1. $.ajax()函数中的beforeSend设置旨在为您提供在发送请求之前修改请求的位置。这可能不是调用第一个动画函数的最佳位置。

  2. 动画回调和 ajax 回调似乎导致了争用条件 - 看起来 ajax 请求有可能在初始动画仍在运行时返回，这意味着 #Loading 元素在应该隐藏时显示。

此示例假定在页面加载时应默认隐藏 #Loading 元素，并且即使 ajax 请求失败(always而不是 done(，元素也应恢复到其初始状态。

$(function() {
  $('#button').on('click', function() {
    $('#Element1').hide('slow', function() {
      $('#Loading').show('slow', function() {
        $.ajax({
            url: 'somePage.html'
          })
          .always(function(data) {
            $('#Loading').hide('slow', function() {
              $('#Element1').show('slow');
            });
          });
      });
    });
  })
})
#Loading { 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="Element1">
  Element1
</div>
<div id="Loading">
  Loading
</div>
<button id="button">
  Button
</button>

这里发生的事情是，当单击button时，运行切换动画(hide()和show()(，然后将ajax请求作为show()动画的回调发送，以便请求在#Loading元素可见之前不会发出。

相关文章：