0

データを含むJSONファイルがあり、ページに必要な情報を入力するためにそれを呼び出しています

$.getJSON('/orders.json', function(data) {
    var entry = data[Math.floor(Math.random()*data.length)];
    $('.product-name').html(entry.product_name);
    $('body').attr('id', entry.order_id);
});

質問。ページをリロードせずに「次の注文を表示」リンクをクリックして、すべての注文をスクロールする方法。

次の機能を実現しようとしています。

ランダムな順序 (またはリストの 1 番目) が表示されるページを開き、[次へ] リンクをクリックして次の順序を表示しますが、ページのリロードはありません。

4

2 に答える 2

0

ページ内のすべての注文を共通のコンテナに配置し、 activeCSS スタイル ルールと組み合わせたクラス ( など) を使用して、表示する必要があるものを示します。

ボタンのclickイベント ハンドラーでは、以下を使用できます。

$('#container > .active').removeClass('active').next().addClass('active');

唯一の複雑な点は、リストの最後の要素に到達すると、上記のコードが最後の項目を無効にし、何も表示されないことです。

アクティブなアイテムがあるかどうかをテスト$('#container > .active').lengthして確認し、ボタンを無効にするか、最後のアイテムをアクティブのままにするか、リストの先頭に戻ることができます。次に例を示します。

$('#next').on('click', function() {
    $('#container > .active').removeClass('active').next().addClass('active');

    if ($('#container > .active').next().length === 0) {
        $('#next').prop('disabled', true);
    }
});

http://jsfiddle.net/alnitak/hDyCL/を参照してください

于 2013-10-02T12:41:52.033 に答える