1

私は jQuery が苦手で、助けが必要です。HTML でテキストを表示したいのですが、数秒後に別のテキストに置き換えます。表示する配列要素を含む JSON オブジェクトがあります。

問題: スクリプトは、JSON オブジェクトの最後の要素のみを表示します。setIntervalおよびsetTimeout機能は正常に動作しています。テキストが追加され、設定されていない場合、すべての要素のテキストが追加され、1 つの文に表示されます。S o$.eachは正常に動作しています。

私は多くのバリエーションを試しましたが、目的を達成することができないようです。

通常、コードの 2 つの例:

例 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

You are iterating over your n items and setting up n functions which are all running at once. Bear in mind that setTimeout does not block. Try reading How JavaScript Timers Work if you don't understand what I mean.

setIntervalここでは単独で十分です。ターゲットをlist[i]setInterval 関数内の値に変更するだけです。これは、2 つの例を組み合わせたものです。

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 に答える