傳遞變量和執行函數

我是一個編碼新手，主要是在這裏和那裏學習東西。我試圖通過jQuery加載json數組數據並用html/css格式化它。本部分已成功。現在我試圖顯示上一個和下一個數據集，但我只能在控制檯日誌中顯示它。我認爲這個問題可能出現在單擊next/prev按鈕後如何再次執行format函數，但我不知道如何解決這個問題......我想我錯過了一些基礎知識......這不應該是這很難，請提示和幫助...謝謝。傳遞變量和執行函數

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

來源

2013-11-21 dsmonkey

你有一堆這裏編碼錯誤的，但它是不明確的，你想有發生什麼。你可以得到一些JSON數據，然後用'.each（）'來遍歷它（這裏有幾個編碼錯誤，但我不知道你想完成什麼）。你想用'.each（）'發生什麼？而且，'.click（）'處理程序應該做什麼？ – jfriend00

另外我注意到您已經提出了7個問題，並且尚未將任何答案標記爲已接受。如果答案沒有解決您的問題，請將答案標記爲已接受或提供反饋。如果你不接受他們的答案，人們將不太願意幫助你。 – Trevor

@Trevor：也許他沒有看到這個http://meta.stackexchange.com/a/5235;） – JFK

這可能是更容易

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

來源

2013-11-22 00:41:24 FiLeVeR10

漂亮的代碼優化，但我看到的唯一潛在的問題是，你正在爲每個（next/prev）點擊做出一個新的http請求，甚至當你達到極限時。 – JFK

弄明白了，現在它非常堅固 – FiLeVeR10

嘗試

編輯＃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用於演示目的

來源

2013-11-22 00:16:06 JFK

不確定是否需要'each'或者'populate'超出'getJSON'，你可以在沒有'each'的情況下完成所有工作，並且只需使用'format'來完成工作。 – FiLeVeR10

@ FiLeVeR10：是的你是對的，'每個'來自原來的調整後 – JFK

傳遞變量和執行函數

回答

相關問題