Question

我想隐藏一个容器，更新该容器的innerHTML，然后再次显示该容器。我知道这两种动作都是可能的，但是当组合在一起时-innerHTML似乎没有更新...

这是JSFiddle-https://jsfiddle.net/definaly/k4xuscz1/58/

这可能吗？

（其他讨论问题-您认为这是在网站页面之间进行切换的一种合适的异步方法吗？此方法有什么地方出问题吗？）

$('#button').click(function(){
    var content = $('.content');
    
    content.hide('slide', {direction:'left'} ,400);
    
    content.innerHTML = "<h3>Page One</h3>";

    content.show('slide', {direction:'right'} ,400);
    
});

.content{
  position: absolute;
  width: 90%;
  height: 90%;
  background-color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<button id="button"> Click me </button>

<div class="content">

</div>

Answer 1

您仅将innerHTML与jQuery一起使用，而不是html。此外，如果您更改setTimeout中的持续时间，而忘记在hide中更改持续时间，则不会使用易碎的setTimeout，而可以使用{ {1}}方法。它具有在隐藏动画完成时将运行的功能。

hide

$('#button').click(function() {
    var content = $('.content');
    
    
    content.hide('slide', {direction:'left'} ,400, function() {
        content.html("<h3>Page One</h3>");    
    });

    content.show('slide', {direction:'right'});
    
});

.content{
  position: absolute;
  width: 90%;
  height: 90%;
  background-color: purple;
}

Answer 2

对此进行开头：我不确定100％是否是这样做的理想方法，但是您可以使用以下JS获得所需的结果。

将您的JS更改为：

$('#button').click(function(){
    var content = $('.content');

    content.hide('slide', {direction:'left'} ,400);
    setTimeout(function(){
        content.html("<h3>Page One</h3>");
    }, 400)

    content.show('slide', {direction:'right'} ,400);

});

这将设置基本睡眠，以防止在div滑出屏幕时显示更改，并使用jquery提供的.html（）函数来保持一致性。

Answer 3

您正在使用jQuery。更改内部html的jQuery语法不是.innerHtml = "<blah>"

它是.html("<blah>")

因此将content.innerHTML = "<h3>Page One</h3>";更改为content.html("<h3>Page One</h3>");

隐藏容器，更新innerHTML，然后再次显示

3 个答案: