Question

我在jQuery中很弱，我需要帮助。我想在html中显示一些文本，几秒钟后，用另一个替换它。我有一个JSON对象，其中包含要显示的数组元素。

问题：该脚本仅显示JSON对象中的最后一个元素。 setInterval和setTimeout功能正常运行。如果附加了文本而未设置，则会添加所有元素的文本并将其显示在单个句子中。小号 o $.each工作正常。

我尝试了很多变化，似乎无法达到预期目标。

通常有两个代码示例：

示例1：

<script>
var list = "@Html.Raw(Json.Encode(Model))";
$(document).ready(
    function () {
        for (var i = 0; i < 2; i++)
        {
            $('#spinNaslov').text(list[i].Naslov);
            $('#spinBloger').text(list[i].Korisnik + ', ' + list[i].Datum);
        }            
    });
</script>
<div id="novostiSpin">
    <h2 id="spinNaslov" style="text-align:center; color:#fed8e6;"></h2>
    <span id="spinBloger" style="float:right; color:#999898; padding:5px;"></span> 
</div><br />

最后一个例子：

<script>
var list = @Html.Raw(Json.Encode(Model));
var i = 0;
$(document).ready(function () {
    swap(i);
})

function swap(index) {
    window.setInterval(function () {
        $('#spinNaslov').text('');
        $('#spinBloger').text('');

        $.each(list, function (index, item) {
            $.each(item, function (name, value) {
                window.setTimeout(function () {
                    if (name == 'Naslov') {
                        $('#spinNaslov').text(value);
                    }
                    if (name == 'Korisnik') {
                        $('#spinBloger').text(value);
                    }
                }, 3000);
            });
            i++
        });
    }, 2000);
}        
</script>
<div id="novostiSpin">
    <h2 id="spinNaslov" style="text-align:center; color:#fed8e6;"></h2>
    <span id="spinBloger" style="float:right; color:#999898; padding:5px;"></span> 
</div><br />

两种情况都有相同的行为，请咨询

就是这样！ 谢谢Deedbster 在我看到您的帖子之前，我几乎找到了一个完全不同代码的解决方案。

如果你有时间，如果你能告诉我我错了什么，那对我有帮助。以下代码与您的代码相同，只是不显示列表的第一个或最后一个元素。

<script>
var listCount = @Model.Count;
var list = @Html.Raw(Json.Encode(Model));
var i = 0;
function naNulu() {
    i++;
    if(i===listCount-1) {
        i = 0;
    }
}
$(document).ready(function () {
window.setInterval(function () { swap(i) }, 2000);
})

function swap(index) {
$('#spinNaslov').text('');
$('#spinBloger').text('');

$.each(list, function (index, item) {
    $.each(item, function (name, value) {
        if (name == 'Naslov') {
            $('#spinNaslov').text(list[i].Naslov);
        }
        if (name == 'Korisnik') {
            $('#spinBloger').text(list[i].Korisnik);
        }
    }); naNulu();
});
}

Answer 1

您正在迭代 n 项目并设置 n 功能，这些功能一次全部运行。请记住setTimeout不会阻止。如果你不明白我的意思，请尝试阅读How JavaScript Timers Work。

仅

setInterval就足够了：只需将目标更改为setInterval函数中的list[i]值即可。这是两个例子的组合。

jsFiddle example

$(document).ready(function () {
    var list = [
        {foo: 'Foo1', bar: 'Bar1', quux: 'Quux1'},
        {foo: 'Foo2', bar: 'Bar2', quux: 'Quux2'},
        {foo: 'Foo3', bar: 'Bar3', quux: 'Quux3'},
        {foo: 'Foo4', bar: 'Bar4', quux: 'Quux4'}
    ];
    var i = 0;

    i = swap(list, i);
    window.setInterval(function () {
        i = swap(list, i);
    }, 2000);
})

function swap(list, i) {
    $('#spinNaslov').text(list[i].foo);
    $('#spinBloger').text(list[i].bar + ', ' + list[i].quux);
    return (i + 1) % list.length;
}

jquery循环json中的每个对象并在html中交换文本

1 个答案: