動態創建加載更多按鈕

Question

試圖拼湊一些代碼來創建一個JSON數組的「加載更多」按鈕我拉下來，動態填充頁面，使用jquery切片方法。仍然可怕的jquery將不勝感激任何援助。非常感謝。

代碼：

function populateButtons(data) { 
    var rightcontent = $(".rightcontent"); 
    var sub = document.createElement("a"); 
    var gh_buttons = $(".rightcontent a") 
    sub.innerHTML = data.title; 
    sub.setAttribute("href", data.absolute_url); 
    sub.setAttribute("target", "blank"); 
    sub.setAttribute("class", "hidden"); 
    $(rightcontent).append(sub); 
    setTimeout(function() { 
     $(gh_buttons).slice(0,10).removeClass("hidden"); 
    }, 100); 
} 
var populateButtons = gh_loadMore; 
gh_loadMore = function() { 
    var loadMore = function() { 
     $(rightcontent).after("<button>Load More</button>"); 
    }; 
    $(loadMore).on('click', function (e) { 
    e.preventDefault(); 
    $(gh_buttons).slice(10, 10).slideDown(); 
    $('html,body').animate({ 
     scrollTop: $(this).offset().top 
    }, 1500); 
    }); 
}; 
gh_loadMore(); 

Answer 1

沒有爲你的代碼的順序問題，可以實現諸如以下。

function populateButtons(data) { 
    var sub = document.createElement("a"); 
    sub.innerHTML = data.title; 
    sub.setAttribute("href", data.absolute_url); 
    sub.setAttribute("target", "blank"); 
    sub.setAttribute("class", "hidden"); 
    $(".rightcontent").append(sub); 

    var gh_buttons = $(".rightcontent a"); 
    setTimeout(function() { 
     $(gh_buttons).slice(0,10).removeClass("hidden"); 
    }, 100); 
} 

var gh_loadMore = function() {   
    $(".rightcontent").after("<button id='btn'>Load More</button>"); 
}; 

populateButtons(yourdata); // call it with yourdata variable 
gh_loadMore(); 

$("#btn").on('click', function (e) { 
    e.preventDefault(); 
    $(".rightcontent a").slice(10, 20).removeClass("hidden"); 
    $(".rightcontent a").slice(10, 20).slideDown(); 
    $('html,body').animate({ 
     scrollTop: $(this).offset().top 
    }, 1500); 
});