0

我在 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");
    });

有人能找到错误吗？我试图将其全部作为输出，它运行良好，但是当我尝试在网站上使用它时，它就无法正常工作。

4

2 回答 2

1

当你写这个：

$("#"+pages[j]).animate({width: width}, "slow");

你没有输出任何东西，你正在执行它。如果您需要动态生成的 javascript，我建议您使用服务器端代码来动态生成它。

但另一个，可能是最好的选择，是让你的 javascript 更加全球化，因为它非常多余......

于 2013-06-11T15:18:39.870 回答
-1 
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");
    }
});
于 2013-06-11T15:23:13.473 回答