javascript - 如何使用循环为多个元素构建 Javascript/Jquery？

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() 将索引号放在对象上的事件处理程序之前，以便稍后可以根据需要检索它独立于 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，我们无法就此提供任何建议。