JavaScript for循环小探测器
JavaScript for循环小探测器
提问于 2013-06-11 23:13:57
我这里有一个关于for循环的小问题：
var wide = "700px";
var flat = "5px";
var pages = new Array("home","links","aktuell","kontakt");
for(var i=0;i<pages.length;i++) {
$("."+pages[i]).bind("click", function() {
for(var j=0;j<pages.length;j++) {
var width;
if(pages[j] != pages[i])
width = flat;
else
width = wide;
$("#"+pages[j]).animate({width: width}, "slow");
}
});
$("#"+pages[i]).bind("click", function() {
for(var k=0;k<pages.length;k++) {
var width;
if(pages[k] != pages[i])
width = flat;
else
width = wide;
$("#"+pages[k]).animate({width: width}, "slow");
}
});
}实际上，它应该生成以下输出，但为什么没有呢？
$(".home").bind("click", function() {
$("#home").animate({width: wide}, "slow");
$("#links").animate({width: flat}, "slow");
$("#aktuell").animate({width: flat}, "slow");
$("#kontakt").animate({width: flat}, "slow");
});
$("#home").bind("click", function() {
$("#home").animate({width: wide}, "slow");
$("#links").animate({width: flat}, "slow");
$("#aktuell").animate({width: flat}, "slow");
$("#kontakt").animate({width: flat}, "slow");
});
$(".links").bind("click", function() {
$("#links").animate({width: wide}, "slow");
$("#home").animate({width: flat}, "slow");
$("#aktuell").animate({width: flat}, "slow");
$("#kontakt").animate({width: flat}, "slow");
});
$("#links").bind("click", function() {
$("#links").animate({width: wide}, "slow");
$("#home").animate({width: flat}, "slow");
$("#aktuell").animate({width: flat}, "slow");
$("#kontakt").animate({width: flat}, "slow");
});
$(".aktuell").bind("click", function() {
$("#links").animate({width: flat}, "slow");
$("#home").animate({width: flat}, "slow");
$("#aktuell").animate({width: wide}, "slow");
$("#kontakt").animate({width: flat}, "slow");
});
$("#aktuell").bind("click", function() {
$("#links").animate({width: flat}, "slow");
$("#home").animate({width: flat}, "slow");
$("#aktuell").animate({width: wide}, "slow");
$("#kontakt").animate({width: flat}, "slow");
});
$(".kontakt").bind("click", function() {
$("#links").animate({width: flat}, "slow");
$("#home").animate({width: flat}, "slow");
$("#aktuell").animate({width: flat}, "slow");
$("#kontakt").animate({width: wide}, "slow");
});
$("#kontakt").bind("click", function() {
$("#links").animate({width: flat}, "slow");
$("#home").animate({width: flat}, "slow");
$("#aktuell").animate({width: flat}, "slow");
$("#kontakt").animate({width: wide}, "slow");
});有人能找到错误吗？我试着把它全部作为输出，它工作得很好，但当我尝试在网站上使用它时，它就不起作用了。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-06-11 23:23:13
var wide = "700px";
var flat = "5px";
var pages = ["home","links","aktuell","kontakt"];
var selectors = [];
for(var i in pages) {
selectors.push('.' + pages[i]);
selectors.push('#' + pages[i]);
}
$(selectors.join()).bind("click", function() {
for(var j=0;j<pages.length;j++) {
var width;
if(pages[j] != pages[i])
width = flat;
else
width = wide;
$("#"+pages[j]).animate({width: width}, "slow");
}
});Stack Overflow用户
发布于 2013-06-11 23:18:40
当你写下这篇文章时：
$("#"+pages[j]).animate({width: width}, "slow");你没有输出任何东西，你只是在执行它。如果你需要动态生成的javascript，我建议使用服务器端代码来动态生成它。
但是另一个，也可能是最好的选择，是让你的javascript更加全球化，因为它是非常多余的……
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17047662
复制相关文章
相似问题
腾讯云开发者
