一次返回一个数组的x项

Question

大家好日子。

我有这个小jquery代码。

$(document).ready(function() {
    $("#mains").one("click", function() {
        var pmmain = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm", "nnn", "ooo", "ppp"];
        var a = 0;
        var b = 0;
        for (a = 0; a < pmmain.length; a++) {
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[a] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[a] + ".png\"></div>");
        }
    });
});

代码正在运行，但我真正想要做的就是让我们一次返回4个项目。 我仍然想用它做很多事情，但我想一点一点地问它会让我更好地理解它，而不是一气呵成。

更新：

我不知道是否有人感兴趣，但这就是我最终的结果

    $(document) .ready(function(){
    var a;
    var b;
    var c;
    var d;
    var pmmain =["Citrix", "Coach", "Disney", "Edison", "Eversource", "Fedex", "General Dynamics", "Hertz", "Kimco", "Nabors", "Starbucks", "Timewarner", "TW Telecom", "Weatherford", "Western Union", "Zoetis"];
    $("#mains") .one("click",function(){
    c=0;
    d=c+4;
    a=4;
    b=0;

    for (a=c; a<d; a++){
    $("#pm-page-main") .append("<div class=\"main-box\"><div class=\"title-box\"><span class=\"reg-wht-bold\">"+pmmain[a]+"</span></div><BR><BR><img src=\"imgs\\"+pmmain[a]+".png\"></div>");
    }
    });
       $("#next-four").click(function() {

                 b = a
                 d = b +4;
    $("#pm-page-main") .html(""); 
        for (b=a; b < d; b++) {
                $("#pm-page-main") .append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[b] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[b] + ".png\"></div>").hide().show();;
        }
            a = a+4;
    });
    });

我决定采用这个，因为它让我可以选择清除div并放入接下来的四个。

我想我的下一步是弄清楚当阵列结束时如何阻止它走。

感谢您的帮助！

Answer 1

每次单击#mains时，以下代码将为您提供四个代码。 这意味着.one()必须更改为.on() 。 循环开始和限制以及数组被跟踪并保存为数据属性。

 $(document).ready(function() { $("#mains").data({a:0,b:0,pmmain:["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm", "nnn", "ooo", "ppp"]}) .on("click", function() { var d = $(this).data(); db = da + 4; for (i = da; i < db && db <= d.pmmain.length; i++) { //change the value of a to be the limit $("#pm-page-main").append("<div class=\\"main-box\\"><div class=\\"title-box\\"><span class=\\"reg-wht-bold\\">" + d.pmmain[i] + "</span></div><BR><BR><img src=\\"imgs\\\\" + d.pmmain[i] + ".png\\"></div>"); } da = db; }) .trigger('click'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" id="mains">Next Four</button> <div id="pm-page-main"></div> 

Answer 2

对代码的一个简单更改：

$(document).ready(function() {
    $("#mains").one("click", function() {
        var pmmain = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm", "nnn", "ooo", "ppp"];
        var a = 0;
        var b = 0;
        for (a = 0; a < 4; a++) { //change the value of a to be the limit
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[a] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[a] + ".png\"></div>");
        }
    });
});

在这里小提琴： http ： //jsfiddle.net/60mav6ev/2/

编辑（按要求）：

要在单击按钮时获取下一组四个项目，您需要以下内容：

$(document).ready(function() {
    var a;
    var b;
    var y;
    var z;
     var pmmain = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm", "nnn", "ooo", "ppp"];
    $("#mains").one("click", function() {

         y = 0;
         z = y +4;
         a = 4;
         b = 0;
        for ( a=y; a < z; a++) {
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[a] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[a] + ".png\"></div>");
        }

    });
    $("#fourmore").click(function() {

             b= a
             z = b +4;
    for (b=a; b < z; b++) {
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[b] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[b] + ".png\"></div>");
    }
        a = a+4;
});
});

小提琴： http ： //jsfiddle.net/60mav6ev/5/