在循环中选择动态元素 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选择器，因为这对于多个元素来说是相同的。使用 jQuerydata来存储索引。$i=0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;foreach ($form as $value) {&nbsp; &nbsp; $input = '<input type="number" class="percentage" data-index="'.$i.'" value="'.$value->persentase.'" min="0" max="100" title="Progres">';&nbsp; &nbsp; $inputdnone = '<input type="number" id="persentase'.$i.'" min="0" max="100" value="'.$value->persentase.'">'; //this input should not appear in view&nbsp; &nbsp; $i++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}在jQuery部分，不需要使用循环，只需为percentage类编写更改函数。每当输入值更改时都会触发此操作：$(".reportsForApps").on("change", ".percentage", function(){ // 'parentElementId' should be replaced with actual parent element id.&nbsp; &nbsp; var tbpersentase = $(this).val();&nbsp;&nbsp; &nbsp; var index = $(this).data("index");&nbsp; &nbsp; $('#persentase'+index).val(tbpersentase);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});

Answer 2

您必须使用change() 函数在每次#formJum 值更改时执行该代码。如果您在每次输入更改中正确处理这些事件处理程序，也会更好。

Answer 3

添加数据类型 attrdata-group="tbpersentase"并在函数中调用它$input = null;$inputdnone = null;foreach ($form as $key => $value) { // you could also use $key value for increment&nbsp; &nbsp; $input .= '<input type="number" data-group="tbpersentase" id="tbpersentase'.$key.'" min="0" max="100" value="'.$value.'" title="Progres">';&nbsp; &nbsp; $inputdnone .= '<input type="hidden" id="persentase'.$key.'" min="0" max="100" value="'.$value.'">'; //this input should not appear in view}&nbsp;// place in html to echo results of dynamically created inputs from DB info&nbsp;<?=$input?>&nbsp;<?=$inputdnone?>// JQuery 3.4.1$( "input[data-group='tbpersentase']" ).change(function() {&nbsp; var $this = $(this).val(); // get users value of the changing input field&nbsp; var tbpersentaseID = $(this).attr('id'); // get the changing input fields ID so we can remove IDs alpha chars&nbsp; var getID = tbpersentaseID.replace(/[^0-9]/g,''); // declare a new variable containing the numbers for the selected ID&nbsp; var persentaseID = 'persentase' + getID; // Concatenate desired alpha ID name to selected key value&nbsp;&nbsp; $("#"+persentaseID).val($this); // set value});在 chrome 中进行测试，并将 的值更改#persentase为在 中输入的值#tbpersentase，但保留 中的原始 ID #persentase。希望这就是您想要实现的目标。另外，如果您想知道从数据库中获取了多少行，请count()在 php.ini 中使用。$form_count&nbsp;=&nbsp;count($form);