jquery 的多个实例并通过 ajax 将值发送到 php

Question

我对 jquery 的多个实例及其获取数据并通过 ajax 将其发送到下一步的方式有疑问。

jquery代码：

$(document).ready(function(){

  for (var i = 1; i <= 5; ++i) {

    $('#toggle'+i).change(function(i){
      var mode= $(this).prop('checked');
      var data+i = $('#building_'+i).val();
      // // submit the form 
      // $(#myForm).ajaxSubmit(); 
      // // return false to prevent normal browser submit and page navigation 
      // return false; 
    $.ajax({
      type:'POST',
      dataType:'JSON',
      url:'admin/sites/audio_alarm.php',
      data: { mode: mode, building_id: data+i },
      success:function(data)
      {
        var data=eval(data);
        message=data.message;
        success=data.success;
        $("#heading").html(success);
        $("#body").html(message);
        }
      });
    });
  }
});

然后我有一个来自数据库的建筑物列表：

<input type="checkbox" name="toggle" id="toggle<?php echo $row["id"];?>" data-toggle="toggle" data-off="Disabled" data-on="Enabled">
<input type="hidden" name = "building_id_<?php echo $row["id"];?>" id="building_id_<?php echo $row["id"];?>" value="<?php echo $row["id"];?>">

目前这不起作用。如果我从后面的代码中删除所有 ID，它将起作用但只发送第一个实例（在本例中为 1 的 ID）。

基本上这是做的，有一个建筑清单。每个结果都有一个切换开关来禁用建筑物。切换开关后，我需要它通过 ajax 发送建筑物 ID 并更新数据库。

我环顾四周但发现了类似的问题。另外，我是 jquery 的新手，目前对我来说似乎太复杂了。

感谢任何帮助。

谢谢

编辑：

如果有人感兴趣：

下面标记的答案有效，并且按照建议我在一个元素（复选框）中传递值

<input type="checkbox" class="toggle" name="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" value="<?php echo $row["id"];?>">

Answer 1

给所有的复选框和隐藏的输入一个 class，这样你就可以 select 而不是遍历 ID 号。

然后用一个DOM遍历函数找到后面隐藏的输入，我也给了一个class.

使用有效的变量名（data+i 无效），不要调用 eval(data).

$(document).ready(function() {
  $('.toggle').change(function(i) {
    var mode = $(this).prop('checked');
    var data = $(this).next('.building').val();
    $.ajax({
      type: 'POST',
      dataType: 'JSON',
      url: 'admin/sites/audio_alarm.php',
      data: {
        mode: mode,
        building_id: data
      },
      success: function(data) {
        message = data.message;
        success = data.success;
        $("#heading").html(success);
        $("#body").html(message);
      }
    });
  });
});

<input type="checkbox" name="toggle" class="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled">
<input type="hidden" name = "building_id_<?php echo $row["id"];?>" class="building" value="<?php echo $row["id"];?>">

jquery 的多个实例并通过 ajax 将值发送到 php

Multiple instance of jquery and sending value to php via ajax

jquery

toggle