javascript - Jquery 如何使用变量作为 .change() 函数的标识符？

Question

现在我是 Javascript/Jquery 的初学者。我想创建一个动态代码，这样当网站出现一些新功能时它就可以工作，而无需编辑代码。

现在我刚刚阅读了一些帖子如何使用变量作为 id 的标识符，但它对我不起作用。下面是一个例子:

var category;
$('#mainCategory').change(function (event) {
   checkboxID = event.target.id;
   category="category"+checkboxID;
   ...some code...
});
$("#"+category).change(function (event) {
    $('#category'+checkboxID+' :input').attr('class','' );
    console.log("var: "+category);
});

所以当我使用整个表达式而不是使用变量时，函数 mainCategory 总是在另一个函数之前运行，并且类别在第二个函数中被正确写入。我希望你能帮助我。

部分html代码:

 <form method="post" action="../php/saveTraining.php">
    <section id="mainCategory" class="hidden">
        <label><input type="checkbox" id="Krafttraining">Krafttraining</label>
        <label><input type="checkbox" id="Joggen">Joggen</label>
    </section>
    <section id="categoryKrafttraining" class="hidden">
        <label><input type="checkbox">Kurzhantel</label>
        <label><input type="checkbox">Bankdrücken</label>
        <label class="hidden"><input type="number" id="saetze">Sätze</label>
        <label class="hidden"><input type="number" id="wiederholungen">Wiederholungen</label>
    </section>
    <input type="hidden" id="saveTraining" name="sent" value="save" class="hidden"/>
</form>

因此，实际发生的是，在选中Main类别的复选框时，将出现第二部分的复选框。但是当我选中第二部分的复选框时，什么也没有发生。

Answer 1

我以为我以前有解决方案，但我发现我错了。我相信这应该有效，您可以在其中重新添加监听器作为 var category 更改的值:

var category;
$('#mainCategory input[type="checkbox"]').change(function (event) {
     checkboxID = event.target.id;
     category="category"+checkboxID;

     $('#' + category).find('input[type="checkbox"]').off("change").on("change", function (event) {
         $('#category'+checkboxID+' :input').attr('class','' );
         console.log("var: "+category);
     });
 });

您需要重新添加监听器，因为随着 var 类别的更改，新元素将被定位。