Question

var smth = new Array("1","2","3");
for(var i=0;i<smth.length;i++){
    $("#id"+i+"_del").click(function(){
            $.ajax({
                type: 'POST',
                url: 'delete.php',
                data: {filek : smth[i]},
                success: function(html){
                    console.log(html);
                }
            });
    });
};

如何发送＆＃34; smth [i]＆＃34;通过ajax中的数据？当我在ajax之前创建var时，它的alwayes是最后一个，所有按钮都发送数组的最后一个元素。

Answer 1

处理程序可以获取目标元素的ID并从中提取i：

var smth = new Array("1","2","3");
for(var i=0;i<smth.length;i++){
    $("#id"+i+"_del").click(function(){
        var i = parseInt(this.id.substr(2), 10);
        $.ajax({
            type: 'POST',
            url: 'delete.php',
            data: {filek : smth[i]},
            success: function(html){
                console.log(html);
            }
        });
    });
};

迭代变量和闭包问题的其他更一般的解决方案可以在这里找到：JavaScript closure inside loops – simple practical example

Answer 2

请勿使用for循环，并且不要使用编号的ID。但是，如果您必须使用编号的ID并且无法添加css类：只需检查开头和结尾，这样您就不需要循环：

var smth = ["1","2","3"];
$("[id^=id][id$=_del]").click(function(){
    let i = parseInt(this.id.substr(2), 10);
    $.ajax({
        type: 'POST',
        url: 'delete.php',
        data: {filek : smth[i]},
        success: function(html){
            console.log(html);
        }
    });
};

Answer 3

为了避免搞乱索引循环，你可以尝试使用正则表达式方法，如下所示：

$('div')
  .filter(function() {
    return this.id.match(/^id\d+_del$/);
  })
  .click(function() {
    let id = this.id.match(/id(\d+)_del/)[1];

    $.ajax({
      type: 'POST',
      url: 'delete.php',
      data: { filek: smth[id] },
      success: function(html) {
        console.log(html);
      },
    });
  });

JSFiddle（查看XHR的网络标签页）

基本上它需要带有以id开头的id的所有div，在中间有一些数字并以_del结尾，然后使用从id中捕获的数字将ajax调用绑定到每个。虽然您仍需要确保smth包含您需要的所有项目，但IMO会更加清晰。

那就像其他提到的那样，我建议在div中使用类和数据属性，这样可以利用更安全，更智能的解决方案，而不需要这样的技巧。

编辑：

班级/数据方法：

＆＃13;

$('.del').click(function() {
  let id = $(this).data('filek-id');

  console.log(`Id: ${id}`);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="del" data-filek-id="0">Foo click me</div>
<div class="del" data-filek-id="1">Bar click me</div>
<div class="del" data-filek-id="2">Baz click me</div>

＆＃13;

Answer 4

OP中的问题在很多次上进行了讨论。问题的名称是循环中的异步函数执行。

首先看看OP有什么问题：

var smth = new Array("1","2","3");
for(var i=0;i<smth.length;i++){
    $("#id"+i+"_del").click(function(){// i comes from the loop and is OK
        $.ajax({
            type: 'POST',
            url: 'delete.php',
            data: {filek : smth[i]},//the code runs *after* the loop is completed and **i** is 3 (in this case)
            success: function(html){
                console.log(html);
            }
        });
    });
};

如何解决？
如果 ES6 可用，则没有问题。 Read documentation

for(let i=0;i<smth.length;i++){// i is scoped to the loop
//  ^^^
// OP code
}

否则闭包就是解决方案

var smth = new Array("1","2","3");
for(var i=0;i<smth.length;i++){
   (function(j){ // it is possible to use **i** but it will be different **i**
     $("#id"+j+"_del").click(function(){// 
          $.ajax({
            type: 'POST',
            url: 'delete.php',
            data: {filek : smth[j]},// j keeps the value
            success: function(html){
                console.log(html);
            }
        });

    });})(i);
};

在ajax中发送数组元素作为数据

4 个答案: