jquery循環json中的每個對象和html中的交換文本

Question

我在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(); 
}); 
}  

Answer 1

你迭代您ñ項目，並設立ň功能，這都在同時運行。請記住，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; 
}