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

执行此操作的一种方法（无需查看您的 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. 我用一个语句声明了多个变量var。
  2. toString(i)不需要在字符串的末尾添加数字并且您也拼错了（大写错误）
  3. .each()不需要将 .css() 应用于 jQuery 集合中的每个项目

我怀疑如果我们可以看到您的 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 回答