while循环和切换表头

Question

我有一张<theader>的表格。在每个标题下面，我的PHP生成<tbody>我的目标是在用户点击表标题后切换每个标题下面的<tbody>。每个<theader>都有一个唯一的ID，与之对应的<tbody>也是如此。例如，标题是＃GenEdCategory1并点击它将切换＃GenEdCourses1。对于＃GenEdCategory2和＃GenEdCourses2 ......

等等

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

当我硬编码时，它工作正常！单击＃GenEdCategory1将切换＃GenEdCourses1。但是我希望根据已经获取的标题数量使其动态化，我无法解决任何问题！

我使用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;
            };
          };
        };

这是我正在使用的表格的HTML代码段：

Answer 1

您可以使用jQuery的DOM遍历函数在单个函数中执行，而不是循环，并且不需要为它们提供ID。

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

BTW，<theader>应为<thead>。