动态创建加载更多按钮

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