Question

而不是在我的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("");
                    });

Answer 1

执行此操作的一种方法（没有看到HTML进一步简化）是使用.data()在事件处理程序之前将索引号放在对象上，以便以后可以根据需要检索它，而不是{{1循环索引，它将在那时运行：

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(""); }); }语句声明了多个变量。
var不需要在字符串的末尾添加一个数字，并且你也有错误（错误的大小写）
toString(i)不需要将.css（）应用于jQuery集合中的每个项目

我怀疑如果我们能够看到您的HTML，我们可以进一步大大简化这一点，因为可能被利用以减少代码的项目之间可能存在关系，但如果没有HTML，我们就无法提供任何建议。

Answer 2

你可能成为了闭包内圈的受害者。您需要循环内的代码位于单独的函数中，因此每次迭代都会获得自己的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)
}

Answer 3

我怀疑你是在调用错误的函数，应该是.toString()而不是.ToString()。

请注意，JavaScript区分大小写。

但如果我仍然编写代码，我将忽略.toString()部分并直接使用数值......

如何使用循环为许多元素构建我的Javascript / Jquery？

3 个答案: