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 に答える