javascript - 一次返回数组的 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>