Question

我正在使用带有数据的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);
});

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

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

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

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

Answer 2

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

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

通过AJAX的JSON数据

2 个答案: