javascript - 使用 JQuery 通过迭代 ID 引用 DOM 元素

Question

我想做两件事。第一件事是未知数量的元素的点击事件，稍后将添加到 DOM 中，因为它会不断更新。

点击甚至看起来像这样并且目前正在工作。

$("#systemDetails").on("click", "#categoryToggle", function () {
    $(this).closest('table').next().toggle("slow");
    $(this).toggleClass("glyphicon-plus-sign glyphicon-minus-sign");
});

id 是 categoryToggle。

现在我想用那个 ID 引用每个单独的项目，但是当 ID 都相同时你不能这样做。 .each() 将只返回具有该 ID 的第一个元素。

理想情况下，我希望我的第二段代码表现如下: 在 DOM 的一部分被 AJAX 替换之前有一个保存功能，然后在它被替换之后我想调用这个:

function recallVis() {
    $("#categoryToggle").each(function (index) {
        if (categoryVis[index]) {
            // hide
            $(this).closest('table').next().hide();
        } else {
            // show
            $(this).closest('table').next().show();
        }
    });
}

有没有一种方法可以遍历所有同名的 ID，或者遍历 ID 列表，例如这种格式:ID1、ID2、ID3...等等...并维护一个单击事件处理程序适用于 ID(数字)格式的所有项目？

或者如果我想使用 JQuery 的 .each() 方法，我是否会在我的选择器中使用类？

Answer 1

我会使用类名而不是 ID，因为 ID 必须是唯一的并且管理带有后缀的 ID(ID1、ID2 等，如您在这个问题)是一个痛苦。但这是可以做到的。

使用类:

function recallVis() {
    // v--- Change is here
    $(".categoryToggle").each(function(index) {
        if (categoryVis[index]) {
            // hide
            $(this).closest('table').next().hide();
        } else {
            // show
            $(this).closest('table').next().show();
        }
    });
}

...您委托(delegate)的click 处理程序将是:

// Change is here ---------------v
$("#systemDetails").on("click", ".categoryToggle", function () {
    // ...
});

使用ID1、ID2等:

function recallVis() {
    $("[id^=categoryToggle]").each(function(index) {
        if (categoryVis[index]) {
            // hide
            $(this).closest('table').next().hide();
        } else {
            // show
            $(this).closest('table').next().show();
        }
    });
}

...您委托(delegate)的click 处理程序将是:

// Change is here ---------------vvvvv--------------v
$("#systemDetails").on("click", "[id^=categoryToggle]", function () {
    // ...
});

它使用“属性以”选择器 ^= 来查找具有以 categoryToggle 开头的 id 属性的任何元素。