For循环通过Ajax OnChange不起作用

Question

我试图通过 AJAX 调用循环 OnChange 方法，但令人惊讶的是它不起作用。

for (let index = 0; index < 300; index++) {
        $('#txtLini'+[index]).on('change', function() {
            var lini=this.value;
            $.ajax({
                url:'<?=base_url()?>index.php/fin/controller/M_index/getKode',
                method: 'post',
                data: {lini: lini},
                dataType: 'json',
                success: function(response){
                $.each(response,function(index,data){
                    console.log(index);
                    document.getElementById("txt_sumberdaya"+[index]).value = data['TEXT'];
                });
                }
            });
        });
    }

在我上面的 javascript 中，我试图循环我的 textbox id 以在 ajax 调用中进行处理。我有很多 id (txtLini0,txtLini1,txtLini2,etc.) 并且每个 id 用户想要选择的可能性也很多。因此，我使用 id 作为OnChange 方法中的特定变量。每个 id 中的用户类型可以影响另一个 id (txt_sumberdaya0, txt_sumberdaya1, txt_sumberdaya2, etc.) 并在 Onchange Ajax 中输出。

我试过像这样循环，但它不能按我的意愿工作。 例如：

如果用户输入 id txtLini0，则 ajax 的输出应填写 txt_sumberdaya0。等等。

但是在这里我的错误是当我尝试填写 id txtLini1 或 txtLini2 时，ajax 的输出仍然填写 txt_sumberdaya0。似乎我的索引循环仍然在 0 每次来到 ajax 成功过程。

有没有人可以修复我的代码或任何其他想法以使其清晰？ 谢谢。

Answer 1

再次查看您的代码后，您得到 0 的原因是因为在您的 each $.each(res,function(index,data)中传递的索引值将取决于您的数组响应中数据的长度，所以如果它是 1 则 @ foreach 循环的 987654323@ 将始终默认为 0 来解决这个问题很简单，将名称从 index 更改为 for ex i $.each(res,function(i,data) 或者如果您不使用它，请将其删除并直接传递外部循环的索引

您的最终代码应如下所示

for (let index = 0; index < 300; index++) {
        $('#txtLini'+[index]).on('change', function() {
            var lini=this.value;
            $.ajax({
                url:'<?=base_url()?>index.php/fin/controller/M_index/getKode',
                method: 'post',
                data: {lini: lini},
                dataType: 'json',
                success: function(response){
                $.each(response,function(data){
                    console.log(index);   // the index you will get here is the index of the outer loop
                    document.getElementById("txt_sumberdaya"+[index]).value = data['TEXT'];
                });
                }
            });
        });
    }

Answer 2

使用事件委托。当 Javascript 中发生事件时，它会“冒泡”到父元素。这意味着如果您有：

<div id="foo"><!-- lots of inputs --></div>

您可以为所有这些事件使用单个事件侦听器：

$('#foo').on('change', 'input', (e) => // ...

但是你怎么知道是哪个输入触发了事件呢？ e 参数将同时具有 target 和 currentTarget 属性，它们为您提供了附加事件处理程序的元素以及触发事件的元素。

通过使用这些事件属性，您应该获得触发事件的输入的正确索引。或者，您也可以避免使用=> 函数，在这种情况下，您可以使用this 来引用input。

欲了解更多信息，请参阅：https://learn.jquery.com/events/event-delegation/

Answer 3

您可以使用以下方法使用类来绑定onChange 事件。您在 AJAX 响应中所做的事情是错误的。你不需要任何循环。

$('.txtLini', document).each(function(index, item) {
  $(item).on('change', function() {
    var lini = this.value;
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts/' + (index + 1),
      method: 'get',
      // data: {
      //   lini: lini
      //  },
      //  dataType: 'json',
      success: function(response) {
       // console.log($('#txt_sumberdaya' + (index + 1)));
        $('#txt_sumberdaya' + (index + 1)).val(JSON.stringify(response));
      }
    });
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  INput : <input type="text" id="txtLini1" class="txtLini" /> Copy input : <input type="text" id="txt_sumberdaya1" class="txt_sumberdaya" />
</div>

<div>
  INput : <input type="text" id="txtLini2" class="txtLini" /> Copy input : <input type="text" id="txt_sumberdaya2" class="txt_sumberdaya" />
</div>

<div>
  INput : <input type="text" id="txtLini3" class="txtLini" /> Copy input : <input type="text" id="txt_sumberdaya3" class="txt_sumberdaya" />
</div>

<div>
  INput : <input type="text" id="txtLini4" class="txtLini" /> Copy input : <input type="text" id="txt_sumberdaya4" class="txt_sumberdaya" />
</div>