一次返回数组的 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();
        d.b = d.a + 4;
        for (i = d.a; i < d.b && d.b <= 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>");
        }
        d.a = d.b;
    })
    .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/