在循环中选择动态元素 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;                                                                           

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);                                       

});

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

    $input .= '<input type="number" data-group="tbpersentase" id="tbpersentase'.$key.'" min="0" max="100" value="'.$value.'" title="Progres">';

    $inputdnone .= '<input type="hidden" id="persentase'.$key.'" min="0" max="100" value="'.$value.'">'; //this input should not appear in view

}

 // place in html to echo results of dynamically created inputs from DB info

 <?=$input?>

 <?=$inputdnone?>

// JQuery 3.4.1

$( "input[data-group='tbpersentase']" ).change(function() {

  var $this = $(this).val(); // get users value of the changing input field

  var tbpersentaseID = $(this).attr('id'); // get the changing input fields ID so we can remove IDs alpha chars

  var getID = tbpersentaseID.replace(/[^0-9]/g,''); // declare a new variable containing the numbers for the selected ID

  var persentaseID = 'persentase' + getID; // Concatenate desired alpha ID name to selected key value 

  $("#"+persentaseID).val($this); // set value

});

在 chrome 中进行测试，并将 的值更改#persentase为在 中输入的值#tbpersentase，但保留 中的原始 ID #persentase。希望这就是您想要实现的目标。

另外，如果您想知道从数据库中获取了多少行，请count()在 php.ini 中使用。

$form_count = count($form);