我不知道是否有人会注意到我编辑了上一篇文章,所以我现在在这里发布一篇新文章。
我有这个代码
$(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++) {
if(b != 16){
$("#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>"+b+"").hide().show();
}
else{
a=0;
}}
a = a+4;
});
我添加的代码:
$("#last-four").click(function() {
b = (a)<pmmain.length?a:0;
a = b; // just in case if b is reset to 0
d=b-8;
$("#pm-page-main") .html("");
for (b=a; b-4 > d; d++) {
$("#pm-page-main") .append(d+"<div class=\"main-box\"><div class=\"title-box\"><span class=\"reg-wht-bold\">" + pmmain[d] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[d] + ".png\"></div>").hide().fadeIn(75);
}
a = a-4;
});
});
它正在正常工作。这是一个一次显示 4 个项目的菜单。这里的问题是 for 语句即使到达数组末尾也不会停止循环。我尝试在 for 循环中放入 if 语句,但没有成功。
我的问题是当 for 循环到达数组末尾时如何停止它?或者有没有办法回到前 4 项。有没有更好的方法来解决这个问题?我读过有关 Jquery 中的 .each 的内容,但我不知道如何使用它。
更新:我只将 html 粘贴到需要代码的位置。
<div id="pm-page">
<div id="top-left">
<span class="title">PAGEMAKEUP Section</span>
</div>
<div id="top-right">
<button class="btn-home">Home</button> <button class="btn-akbar">akbar</button>
</div><BR>
<h1 class="line-blank"><span></span></h1>
<!--<div class="bar"></div>-->
<div id="pm-body">
<div class="pm-page-menu">
<button id="mains">STYLE TEMPLATES</button>
<button id="next-four">OVERPRINT VS KNOCKOUT</button>
<button>CREATING CUSTOM QR CODE</button>
<button>PM FILE MANAGER</button>
</div>
<div id="pm-page-main">
</div>
</div>
</div>
第二次更新:嗨,我希望有人能看到这个。我已经更新了 javascript 代码,现在循环回 0。我现在无法解决的问题是,当 b 等于 16 时,a 应该重置为 0,以便再次显示前 4 项。但问题是,当我再次单击按钮时(在数组中的最后一个值之后),它不会返回到 0,而是显示未定义的 17,18,19。当我再次点击时,0、1、2和3项将被跳过,程序立即跳转到4、5、6、7。到目前为止,我仍在试图弄清楚。任何帮助将不胜感激。
第三次更新:有人看到这个吗?我插入了几行。这是一个新按钮,其中将显示前 4 项。除非我处于前四项,否则它工作正常。当我单击按钮时,会出现负数。我希望比分能达到 12-15,但我的脑子正在思考如何想出这个逻辑。有什么帮助吗?
最佳答案
你的“下四个”for循环看起来不错,除了其中的return语句
return(b == pmmain.length);
我不知道你为什么把它放在里面,但这就是让你认为你的 for 看起来没有停止的原因,实际上它确实如此。让我解释清楚。
假设单击“下四个”div 元素时,您的代码执行如下
b = a; //let us say 'a' is 4 and so as 'b' ie. b=4
d = b + 4; // d = 4 + 4 ==> d=8
for(b=a; b<d; b++) // now b value is again set to 4 and run loop until b<8
{
$("pm-page-main").append("<div..."> + pmmain[b] + "<...>"); // element added pmmain[4]= 'eee'
return (b== pmmain.length); // this will break the loop right away
}
a = a+4; // you will never reach here because of return statement in the loop
如上所述,您的 return 语句将立即中断 for 循环和函数,而且,它将向您的 click 函数调用返回 false,因为 b == pmmain.length 即,4 == 16 始终为 false。 [请注意 - return false 将阻止该事件的默认操作 - 无论如何,您的函数中无需担心]
您的 for 循环仅执行一次并返回(结束整个函数)。
并回答您返回数组中前 4 项的其他问题,可能会尝试更改这行代码,如下所示,
b = a;
d= b+4;
至
b = (a+4)<pmmain.length?a:0;
a = b; // just in case if b is reset to 0
d=b+4;
这会根据数组长度和当前指针(“a”值)分配 b 值。如果循环无法运行到数组末尾,则 b 将得到 0,因此将从数组的第一个值开始。
关于javascript - For 语句打破循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32334708/