Question

我是一名编码新手，主要是在这里和那里学习东西。我试图通过jquery加载json数组数据并用html / css格式化它。本节已经成功。现在我正在尝试显示上一个和下一个数据集，但我只能在控制台日志中显示它。我认为问题可能是关于如何在点击下一个/上一个按钮后再次执行格式化功能，但我不知道如何解决这个...我想我错过了一些基础知识...这不应该是那很难，请提示并帮助......谢谢。

//Loading JSON
jQuery.getJSON("https://dl.dropboxusercontent.com/u/1972456/data/works.json", function(data){
    var i = 0;

    // console.log(data.works[0]);
    jQuery.each(data, function format(){
        $(".aboutWork").html('<h1>' + data.works[i].title + '</h1>');
        $('<h2>' + data.works[i].des + '</h2>').appendTo(".aboutWork");
        $('<p>' + data.works[i].detail + '</p>').appendTo(".aboutWork");
    });     

    $("#next").click(function(){

        i++;
        console.log(data.works[i]);
    });

    $("#prev").click(function(){
        i--;
        console.log(data.works[i]);
    });
});

Answer 1

尝试

编辑＃2 ：优化代码

function populate(data,i) {
    $(".aboutWork").attr("id", "d" + data.works[i].id).html('<h1>' + data.works[i].title + '</h1>');
    $('<h2>' + data.works[i].des + '</h2>').appendTo(".aboutWork");
    $('<p>' + data.works[i].detail + '</p>').appendTo(".aboutWork");
}

jQuery.getJSON("https://dl.dropboxusercontent.com/u/1972456/data/works.json", function (data) {
    var i = 0;
    jQuery.each(data, function format() {
        populate(data,i);
    });

    $(".nav").click(function (event) {
        if (event.target.id == "next") {
            if (i < (data.works.length - 1)) {
                i++;
                populate(data,i);
            } 
        } else if (event.target.id == "prev") {
            if (i > 0) {
                i--;
                populate(data,i);
            } 
        }
    });

});

查看最新的 JSFIDDLE

通知我为ID添加了div用于演示目的

Answer 2

这可能会更容易

$.getJSON('https://dl.dropboxusercontent.com/u/1972456/data/works.json', function (data) {
    var i=0,il=data.works.length-1;
    function format() { $('.aboutWork').html('<h1>'+data.works[i].title+'</h1><h2>'+data.works[i].des+'</h2><p>'+data.works[i].detail+'</p>'); }//print info
    format();//run initial
    $('#next,#prev').on('click', function(){
        if ($(this).prop('id')==='next' && i<il) { i++; format(); }//add
        else if ($(this).prop('id')==='prev' && i>0) { i--; format(); }//subtract
    });
});

这将打印第一个，并在单击按钮时重新运行该功能，只要i在数组的范围内。

做了一个小提琴：http://jsfiddle.net/filever10/rqUsR/

传递变量和执行函数

2 个答案: