Выбор динамического c идентификатора элементов в циклах

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 Деталь, не нужно использовать l oop, просто написать функцию изменения для класса 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

Добавьте тип данных attr data-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, но сохраняет Оригинал в #persentase. Надеюсь, это то, чего вы хотели достичь.

Кроме того, если вы хотите узнать, сколько строк вы получаете из БД, используйте count() в php.

$form_count = count($form);

Answer 3

Вы должны выполнять этот код при каждом изменении значения #formJum, используя функцию change ().

Также было бы лучше, если бы вы правильно располагали эти обработчики событий при каждом изменении ввода.