javascript - 使用基于 html id 的 JavaScript 循环

Question

如果我有一个带有infinite的表，其中有一个输入类型复选框。每个复选框都标有一个id，例如。 #det1、#det2、#det3 我将如何编写 JS 循环来检查是否选中某个复选框以对其执行功能，而无需写出每个 id ，因为这个 id 也会根据产品上传者递增，因此对于上传的每个产品，它只会在 id 上添加 1，最后我可以分配 id。

可以手动添加 id 的 JavaScript:

 $('#details1, #details2').on('change', function(){
    var row = $(this).closest('tr').next('tr');
    if ($(this).prop('checked')) {
        $(row).show();
    }
    else {
        $(row).hide();
    }
 });

这样可行，但是因为有很多基于我​​的 tr 的 id，我只想做一个循环并检查该 id 存在(它可能是 id = #details999)，如果它确实执行函数 on.change。

(对于要上传的每个产品，id 都会添加 1，例如，product1 = #details1 、product2 = #details2 等...)

可能有更好的方法来实现这个想法，但作为新手，我愿意接受任何建议。

我尝试过:

  for (var i = 0; i < ?; i++) {
   $('#details'+ i).on('change', function(){
   var row = $(this).closest('tr').next('tr');
    if ($(this).prop('checked')) {
        $(row).show();
    }
    else {
        $(row).hide();
      }
     })
    }

我知道？没有任何意义，但我意识到我无法设置限制，也不想无限循环，所以我有点卡住了。

Answer 1

向 select 元素添加一个公共(public)类并使用它来定位它们

<input type="checkbox" id="details1" class="details-checkbox">
<input type="checkbox" id="details2" class="details-checkbox">
<input type="checkbox" id="details3" class="details-checkbox">

然后使用

$('.details-checkbox').on('change', function(){
    var row = $(this).closest('tr').next('tr');
    if ($(this).prop('checked')) {
        $(row).show();
    }
    else {
        $(row).hide();
    }
 });