隐藏容器，更新innerHTML，然后再次显示它
隐藏容器，更新innerHTML，然后再次显示它
提问于 2019-06-24 09:03:18
我想隐藏一个容器，更新该容器的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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-06-24 09:35:12
您只需将html与jQuery一起使用，而不是innerHTML。此外，您可以只使用hide方法的第四个参数，而不是使用一个脆弱的setTimeout，如果您在hide中更改持续时间，但忘记在setTimeout中更改它，它将崩溃。它需要一个函数，该函数将在隐藏动画完成时运行。
$('#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;
}<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>
Stack Overflow用户
发布于 2019-06-24 09:13:17
在前面加上:我不是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()函数来保证一致性。
Stack Overflow用户
发布于 2019-06-24 09:14:11
您正在使用jQuery。用于更改内部jQuery的html语法不是.innerHtml = "<blah>"
它是.html("<blah>")
因此将content.innerHTML = "<h3>Page One</h3>";更改为content.html("<h3>Page One</h3>");
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56728776
复制相关文章
相似问题