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);
});

问题。如何通过单击“显示下一个订单”链接滚动浏览所有订单而无需重新加载页面。

我正在尝试实现以下功能：

我打开页面我看到随机顺序（或者只是列表中的第一个），然后我单击“下一步”链接并查看下一个顺序，但没有重新加载页面。

4

2 回答 2

1 
var entry, orders;
$.getJSON('/orders.json', function(data) {
    orders = data;
    entry = Math.floor(Math.random()*data.length);
    displayOrder(entry);
    $("#button").on("click", function () {
        entry++;
        if (entry >= orders.length) {
            entry = 0;
        }
        displayOrder(entry);
    });
});

function displayOrder(num) {
    $('.product-name').html(orders[num].product_name);
    $('body').attr('id', orders[num].order_id);
}
于 2013-10-02T12:37:08.007 回答
0

将页面中的所有订单放在一个公共容器中，并使用一个active结合 CSS 样式规则的类（例如 ）来指示应该是可见的。

在按钮的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 回答