1

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

问题：脚本仅显示 JSON 对象中的最后一个元素。setInterval和setTimeout功能正常工作。如果文本是附加的，而不是设置的，那么所有元素的文本都被添加并显示在一个句子中。S 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();
});
}
4

1 回答 1

0

您正在迭代您的n 个项目并设置n 个同时运行的函数。请记住setTimeout不会阻塞。如果您不明白我的意思，请尝试阅读JavaScript 计时器的工作原理。

setInterval单独在这里就足够了：只需将目标更改为list[i]setInterval 函数中的值。这是您的两个示例的组合。

jsFiddle 示例

$(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;
}
于 2013-07-28T13:30:19.347 回答