Javascript 使用ajax和foreach的引导模式存在问题

我试图使用BS模式来呈现带有选择框的表单，并最终通过ajax调用更新DB中的记录。打开模式的触发器btn是一组

标记，它们具有相同的类名

itagbtn

和

data classschid=“some_numbere”

，用于将变量传递给php脚本。 因此，我应该通过ajax传递给php脚本的数据是模态表单中select字段的值和单击的I标记的data classschdid的值。 问题是，在ajax调用之后，所有记录都会同时更新，而不仅仅是单击的记录。谢谢你的帮助。以下是简化代码：

HTML和Modal

<tr>
  <td>
    <span class="spanClassStatus">
      Missed
    </span>
    <span class="wrapperSpan">
      <i class="btn itagbtn" data-classschid="1" data-toggle="modal" data-target="#ModalUpdateClassStatus"></i>
    </span>
  </td>
</tr>
<tr>
  <td>
    <span class="spanClassStatus">
      Taken
    </span>
    <span class="wrapperSpan">
      <i class="btn itagbtn" data-classschid="2" data-toggle="modal" data-target="#ModalUpdateClassStatus"></i>
    </span>
  </td>
</tr>

<!-- Modal -->
<div class="modal fade" id="ModalUpdateClassStatus" tabindex="-1" role="dialog" aria-labelledby="modalLabelClassStatus">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
          <h4 class="modal-title" id="modalLabelClassStatus">Update Class Status</h4>
          <button type="button" class="close d-block text-danger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
      </div>
      <div class="modal-body">
        <form action="#" method="POST" id="modalForm">
          <div class="">
            <small>Select a new status for this class</small>
            <select name="selected_status_id" id="selected_status_id" required="required">
              <option value="" selected="selected">Choose an item</option>
              <option value="taken">Taken</option>
              <option value="missed">Missed</option>
            </select>
          </div>
          <i class="fa fa-spinner fa-pulse fa-3x fa-fw text-primary d-none" id="statusSpinner"></i>
          <span class="sr-only">Please wait ...</span>
          <button type="submit" id="editClassStatusBtn" class="btn btn-success mt-2" style="font-size:0.9rem;">Update Status</button>
        </form>

      </div> <!-- end of modal-body -->
    </div>
  </div>
</div>

错过
拿
更新类状态
×
为此类选择一个新状态
选择一个项目
拿
错过
请稍候。。。
更新状态

JAVASCRIPT

<script>
  $( document ).ready(
    function(){
      $('#ModalUpdateClassStatus').on('submit', function(e){
      e.preventDefault();
      const itagTriggers=document.querySelectorAll('i[data-classschid]');
      itagTriggers.forEach(itag => {
    
        var class_sch_id = itag.getAttribute('data-classschid');
        var selected_status_id = $('#selected_status_id').val();
        var statusSpinner = $('#statusSpinner');
        var spanClassStatus = $(itag).parent().siblings('.spanClassStatus');

        statusSpinner.removeClass('d-none');
        $('#editClassStatusBtn').prop('disabled', true);
        var url = "{{ path('class_schedule_tch_status_update')|escape('js') }}";
        var type = "POST";
        $.ajax({
          url : url,
          type: type,
          data : {
            'selected_status_id': selected_status_id,
            'class_sch_id': class_sch_id
          },
          success: function(returnedMsg) {
            if (returnedMsg['status'] == "success") {
              $(spanClassStatus).text(returnedMsg['msg']);
            }
            else if(returnedMsg['status'] == "error"){
              //error stuff
            }
            else{
              //unknown error
            }
          }
        });     
      })
    });     
  });
</script>

$（文件）。准备好了吗(
函数（）{
$（'ModalUpdateClassStatus'）。在（'submit'，函数（e）上{
e、 预防默认值（）；
const itagTriggers=document.querySelectorAll（'i[data classschid'）；
itagTriggers.forEach（itag=>{
var class_sch_id=itag.getAttribute（'data-classschid'）；
var selected_status_id=$（'#selected_status_id'）.val（）；
var statusSpinner=$（“#statusSpinner”）；
var spanClassStatus=$（itag.parent（）.sides（'.spanClassStatus'）；
statusSpinner.removeClass（'d-none'）；
$（'editClassStatusBtn'）.prop（'disabled'，true）；
var url=“{path（'class_schedule_tch_status_update'）| escape（'js'）}”；
var type=“POST”；
$.ajax({
url:url，
类型：类型，
数据：{
“选定的\u状态\u id”：选定的\u状态\u id，
“class_schu_id”：class_schu_id
},
成功：功能（returnedMsg）{
如果（returnedMsg['status']=“success”）{
$（spanClassStatus）.text（returnedMsg['msg']）；
}
否则如果（returnedMsg['status']=“error”）{
//错误材料
}
否则{
//未知错误
}
}
});     
})
});     
});

无论何时单击

i

标记，您都可以将

数据属性值保存在隐藏输入中，然后使用此隐藏输入值传递给ajax调用，以引用单击了
i
标记的当前
tr

演示代码：


//单击itag
$（.itagbtn”）。在（“单击”，函数（）上{
$（“[name=classschid]”）.val（$（this.data（“classschid”））//为模式内的隐藏输入添加值
})
$（'ModalUpdateClassStatus'）。在（'submit'，函数（e）上{
e、 预防默认值（）；
var class_sch_id=$（“[name=classschid]”）.val（）；//获取itag值
var selected_status_id=$（'#selected_status_id'）.val（）；
var statusSpinner=$（“#statusSpinner”）；
var spanClassStatus=$（“i[data classschid=“+class\u sch\u id+”）））。parent（）。同胞（'.spanClassStatus'）；///在这里也使用它
console.log（class_schu_id）
statusSpinner.removeClass（'d-none'）；
/*$（'editClassStatusBtn'）.prop（'disabled'，true）；
var url=“{path（'class_schedule_tch_status_update'）| escape（'js'）}”；
var type=“POST”；
$.ajax({
url:url，
类型：类型，
数据：{
“选定的\u状态\u id”：选定的\u状态\u id，
“class_schu_id”：class_schu_id
},
成功：功能（returnedMsg）{
如果（returnedMsg['status']=“success”）{*/
$（spanClassStatus）.text（“ok”）；//returnedMsg['msg']
/*}否则如果（returnedMsg['status']=“error”）{
//错误材料
}否则{
//未知错误
}
}
});*/
});

错过
点击
拿
点击
更新类状态
×
为此类选择一个新状态
选择一个项目
拿
错过
请稍候。。。
更新状态
非常感谢您的回答。它的工作正如预期的那样！：）