动态创建加载更多按钮

时间:2017-08-15 21:06:27

标签: javascript jquery json

尝试拼凑一些代码,为JSON数组创建一个“加载更多”按钮,我将使用jquery切片方法向下拉并动态填充页面。仍然可怕的jquery会感谢任何帮助。非常感谢。

代码:

    $(document).on("click", "a[href='#sample1']", function() {
        if ($("#sample2").is(":visible")) {
            $("a[href='#sample2']").trigger("click");
        }
    });
    $(document).on("click", "a[href='#sample2']", function() {
        if ($("#sample1").is(":visible")) {
            $("a[href='#sample1']").trigger("click");
        }
    });

1 个答案:

答案 0 :(得分: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);
});