Пропустить переменные и выполнить функции

Question

Я новичок в кодировке и в основном изучаю материал здесь и там. Я попытался загрузить данные json массива через jquery и сформировал его с помощью html/css. Этот раздел прошел успешно. Теперь я пытаюсь отобразить предыдущий и следующий набор данных, но я могу получить его отображение в журнале консоли. Я думаю, что проблема может заключаться в том, как снова выполнить функцию формата после нажатия кнопки next/prev, но я не знаю, как это исправить ... Я думаю, что мне не хватает некоторых базовых знаний ... Это не должно быть это трудно, пожалуйста, подскажите и помогите ... Спасибо.

//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

это может быть проще

$.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/

Answer 2

Попробуйте

EDIT # 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 для демонстрационных целей