0

要素名だけが違うだけで同じコードを js ファイルで何度も繰り返すのではなく、js を構築するループを構築したいと考えていました。

ページのいくつかのボタンにトグル機能を追加して、色を変更し、ページの他の場所に値を設定しようとしています。これが私のコードです：

        var className;

        var idName;

        var i;

        for (i = 0; i < 11; i++) {
            className = ".feedbackq";
            idName = "#feedbackq";

            className = className + i.ToString();
            idName = idName + i.ToString();

            $(className).toggle(
            function () {
                $(className).each(function () {
                    $(className).css("background-color", "");
                });
                $(this).css("background-color", "red");
                var value = $(this).val();
                $(idName).val(value);
            },
            function () {
                $(this).css("background-color", "");
                $(idName).val("");
            });

        }

残念ながら、これは何もしていません。ハードコーディングされた変数名を使用してループに入っていない場合、コードは機能しますが、これを動的にしてループを介して構築する必要があります。表示される 11 カウントは最終的に動的変数になるため、ハードコーディングはできません....

助けてくれてありがとう！

更新: 要求に応じて、ループ コードではありません:

                    $(".feedbackq0").toggle(
                    function () {
                        $(".feedbackq0").each(function () {
                            $(".feedbackq0").css("background-color", "");
                        });
                        $(this).css("background-color", "red");
                        var value = $(this).val();
                        $("#feedbackq0").val(value);
                    },
                    function () {
                        $(this).css("background-color", "");
                        $("#feedbackq0").val("");
                    });
                   $(".feedbackq1").toggle(
                    function () {
                        $(".feedbackq1").each(function () {
                            $(".feedbackq1").css("background-color", "");
                        });
                        $(this).css("background-color", "red");
                        var value = $(this).val();
                        $("#feedbackq1").val(value);
                    },
                    function () {
                        $(this).css("background-color", "");
                        $("#feedbackq1").val("");
                    });
                    $(".feedbackq2").toggle(
                    function () {
                        $(".feedbackq2").each(function () {
                            $(".feedbackq2").css("background-color", "");
                        });
                       $(this).css("background-color", "red");
                        var value = $(this).val();
                        $("#feedbackq2").val(value);
                    },
                    function () {
                        $(this).css("background-color", "");
                        $("#feedbackq2").val("");
                    });
4

3 に答える 3

2

これを行う1つの方法（さらに簡略化するためにHTMLを表示せずに）は、を使用するイベントハンドラーの前にオブジェクトにインデックス番号を配置することです。これにより、それまでにコースを実行するループインデックスとは関係なく.data()、後で要求に応じて取得できます。for

    var className, idName, i;

    for (i = 0; i < 11; i++) {
        className = ".feedbackq" + i;
        $(className).data("idval", i).toggle(
        function () {
            var idVal = $(this).data("idval");
            $(".feedbckq" + idVal).css("background-color", "");
            $(this).css("background-color", "red");
            var value = $(this).val();
            $("#feedbackq" + idVal).val(value);
        },
        function () {
            var idVal = $(this).data("idval");
            $(this).css("background-color", "");
            $("#feedbackq" + idVal).val("");
        });
    }

注：他にもたくさんの簡略化を行いました。

  1. var1つのステートメントで複数の変数を宣言します。
  2. toString(i)文字列の末尾に数字を追加する必要はなく、スペルも間違っていました（大文字と小文字が間違っています）
  3. .each()jQueryコレクション内のすべてのアイテムに.css（）を適用する必要はありません

あなたのHTMLを見ることができれば、コードを減らすために悪用される可能性のあるアイテム間におそらく関係があるので、これをさらに大幅に単純化できると思いますが、HTMLがなければ、それについてアドバイスを提供することはできません。

于 2012-07-16T15:40:10.717 に答える
1

あなたはおそらくclosures-inside-for-loopsバグの犠牲になりました。ループ内のコードを個別の関数に含める必要があるため、各反復では、変数を共有するのではなく、独自のclassName変数を取得します。

これを行うには、名前付き関数を作成するか、forループの代わりにコールバックでjQueryイテレータ関数を使用します。

var toggle_stuff = function(i){
   var className = ".feedbackq" + i; //The variables are local to just this iteration now
   var idName = "#feedbackq" + i; //No need to call toString explicitly.

   //And so on...
}

for(var i=0; i<11; i++){
   toggle_stuff(i)
}
于 2012-07-16T15:37:49.813 に答える
0

間違った関数を呼び出しているのではないかと思います。.toString()代わりに.ToString()。

JavaScriptでは大文字と小文字が区別されることに注意してください。

しかし、とにかくコードを書くと、その部分を無視し.toString()て数値を直接使用します...

于 2012-07-16T15:43:10.880 に答える