javascript - 在循环中选择动态元素 id

Question

我是 js 和 jquery 新手，需要一些帮助。我有通过 php 从数据库返回的数据，如下所示:

foreach ($form as $value) {
  $input = '<input type="number" id="tbpersentase'.$i.'" min="0" max="100" value="'.$value->persentase.'" title="Progres">';
  $inputdnone = '<input type="number" id="persentase'.$i.'" min="0" max="100" value="'.$value->persentase.'">'; //this input should not appear in view
  $i++;
}
 $row = '<input type="number" id="formJum" value="'.$i.'">';

我想要的html结果可能是这样的:

<input id="tbpersentase0" value="myVal">
<input id="persentase0" value="myVal">
<input id="tbpersentase1" value="myVals">
<input id="persentase1" value="myVals">
...
// and so on as many as the data retrieve from db
<input id="formJum" value="rowCount">

在我的项目中，当用户更改了 id='"tbpersentase"$i' 值的输入时，然后输入 id='"persentase"$ i' 值更改为 id='"tbpersentase"$i' 值。我使用这样的代码:

var formJum = $('#formJum').val();
for(i=0; i<formJum; i++){
  $('#tbpersentase'+i).change(function(){
    var tbpersentase = $(this).val();
    $('#persentase'+i).val(tbpersentase);
  })
}

浏览器没有给我任何错误，所以我认为我的代码已经完成。但是，当我使用 id='"tbpersentase"$i' 更改输入值时，元素 id='"persentase"$i' 值具有相同的 i 没有改变。

我的整个元素代码如下所示:

<div class="col-sm-7 px-0 reportsForApps d-none">
  <div class="px-3">
    <table class="table dttables" id="dtForm"> // data-tables client side processing
      <thead class="d-none">
        <tr>
          <th class="d-none">-</th>
          <th class="d-none">-</th>
        </tr>
      </thead>
      <tbody id="inputform">
        // #tbpersentase goes here for user input ..
      </tbody>
    </table>
    <div id=""> // this doesnt appear to user page
    <input type="number" id="formJum" value="">
    </div>
    <div id="inputProgres"> // this doesnt appear to user page
      // #persentase goes here ..
    </div>
  </div>
</div>

所有通过ajax设置的值和元素。知道我要对我的代码做什么吗？谢谢

Answer 1

您可以使用class作为选择器，因为这对于多个元素来说是相同的。使用 jQuery data存储索引。

$i=0;                                                                           
foreach ($form as $value) {
    $input = '<input type="number" class="percentage" data-index="'.$i.'" value="'.$value->persentase.'" min="0" max="100" title="Progres">';
    $inputdnone = '<input type="number" id="persentase'.$i.'" min="0" max="100" value="'.$value->persentase.'">'; //this input should not appear in view
    $i++;                                                                                 
}

在 jQuery 部分，不需要使用循环，只需为 percentage 类编写更改函数。每当输入值更改时都会触发此操作:

$(".reportsForApps").on("change", ".percentage", function(){ // 'parentElementId' should be replaced with actual parent element id.
    var tbpersentase = $(this).val(); 
    var index = $(this).data("index");
    $('#persentase'+index).val(tbpersentase);                                       
});