While 循环和切换 table header

Question

我有一个 table 和 <theader>。在每个 header 下方，我的 PHP 生成一个 <tbody> 我的目标是在用户单击 [=] 后切换每个 header 下面的 <tbody> 36=] Header。每个 <theader> 都有一个唯一的 ID，与之对应的 <tbody> 也是如此。例如，header 是#GenEdCategory1，点击它会切换#GenEdCourses1。等等 #GenEdCategory2 和 #GenEdCourses2 ...

我使用这些选择器 jQuery 来进行切换。

当我对其进行硬编码时，它工作正常！点击#GenEdCategory1 将切换#GenEdCourses1。但是我想根据已获取的 header 的数量使其动态化，我无法切换任何东西！

我使用 while 循环执行此操作，但是当我对其进行编码时，它停止工作。任何见解将不胜感激！干杯:)

var numberCategory = $('[id^=GenEdCategory]').length; //calculates number of GenEdCategories
            var idCntr = 1;                                       //GenEdCategory ctr
            var cool = "#GenEdCategory" + idCntr;   //click on this to toggle
            var cool2 = "#GenEdCourses" + idCntr;   //I want to toggle this

          while (idCntr < numberCategory) {
              $(document).on("click", cool, function(){
                $(cool2).toggle();
             });
              idCntr = idCntr + 1;
              cool = "#GenEdCategory" + idCntr;
              cool2 = "#GenEdCourses" + idCntr;
            };
          };
        };

这是我正在使用的 table 的 HTML 片段：

Answer 1

您可以使用jQuery的DOM遍历函数在单个函数中完成，而不是循环，并且不需要给它们ID。

$("thead").click(function() {
    $(this).next("tbody").toggle();
});

顺便说一句，<theader> 应该是 <thead>。

While 循环和切换 table header

While loop and toggling table header

javascript

jquery

toggle