Question

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

html code

$( 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？

****** ****** EDIT

这是我的完整代码：

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

我正在使用bootstrap所以css不对，但它显示了问题。

Answer 1

改变这个：

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

到此：

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

没有ID为＃Scroll-Table的元素。

Answer 2

这是您的完整代码。

<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。

JQuery html（）不使用setTimeout

2 个答案: