JQuery html() Not Working with setTimeout

JQuery html() Not Working with setTimeout

本文关键字：Working with setTimeout Not html JQuery      更新时间：2023-09-26

我有一个使用JQuery来更改div的html的页面。我有两个函数通过函数setTimeout相互调用，延迟2秒。当页面加载时，原始 html 是div 被保存到一个变量中。然后调用第一个函数来更改div 的 html。到目前为止，代码按预期工作。然后调用第二个函数，将div 的 html 设置为原始 html，但div 的 html 在页面上不会更改，但是如果我控制台.log html 它会打印原始 html。我不确定为什么该页面不会与原始 html 一起取消日期。这是我的代码。

网页代码

$( document ).ready(function() {
    ORIG_LIST_HTML = $('#List').html();
    setTimeout(changeOne,2000);
});
function changeOne(){
    $('#List').html('<h1>new text</h1>');
    setTimeout(changeTwo,2000);
}
function changeTwo(){
    $('#Scroll-Table').html(ORIG_LIST_HTML);
    setTimeout(changeOne,2000);
    console.log($('#List').html());
    console.log(ORIG_LIST_HTML);
}
我的

问题是如何让我的页面更新我的div 的 html？

******编辑******

这是我的完整代码：

https://jsfiddle.net/n3qj5q8c/4/

我正在使用引导程序，所以 css 不正确，但它显示了问题。

更改以下内容：

$('#Scroll-Table').html(ORIG_LIST_HTML);

对此：

$('#List').html(ORIG_LIST_HTML);

没有 id 为 #Scroll-Table 的元素。

这是您的完整代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="List" class="row">
    <ul id="scroller" class="col-xs-12">
        <li>
            <div class="row">
                <div class="col-xs-2">Paul Jones</div>
                <div class="col-xs-1">Test</div>
                <div class="col-xs-1">Test</div>
                <div class="col-xs-1">Test</div>
                <div class="col-xs-1">YES</div>
                <div class="col-xs-1">YES</div>
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $( document ).ready(function() {
        ORIG_LIST_HTML = $('#List').html();
        setTimeout(changeOne,2000);
    });
    function changeOne(){
    $('#List').html('<h1>new text</h1>');
        setTimeout(changeTwo,2000);
        console.log('In Chnage One');
        console.log($('#List').html());
    }
    function changeTwo(){
    $('#List').html(ORIG_LIST_HTML);
        setTimeout(changeOne,2000);
        console.log('In Chnage Two');
        console.log($('#List').html());
        console.log(ORIG_LIST_HTML);
    }
</script>

您正在做的是将HTML设置为不同的div。

相关文章：