JavaScript push()无法按预期工作

我想在将其发送到Ajax帖子之前将一些复选框信息添加到数组中，但是当它通过复选框循环时，它似乎会增加数组中的项目数量但是使数组中的每个条目都具有相同的内容。这是我的代码。

var aData = [];
var item = [];
$(".providers_chk").each(function (index, element) {
    if ($(this).attr("checked")) {
        item[0] = element.value;
        item[1] = element.name;
        aData.push(item);
        console.log(aData);
    }
});

对于每个条目，数组最终看起来像{" foo"，" bar"}，而不是{" foo"，" bar"}，{" foo1"，" bar1"}，{" foo2"，"bar2} etc

在您的代码中，您仅使用一个数组来推动，该数组适用于每个循环新值。最后，当对同一对象的引用在结果数组上散布时，您在所有推动的数组中获得相同的值。

您可以即时创建数组，这些数组不会通过参考将其链接在一起。

var aData = [];
$(".providers_chk").each(function (index, element) {
    if ($(this).attr("checked")) {
        aData.push([element.value, element.name]);
        console.log(aData);
    }
});

将var item = [];移动到if：

if ($(this).attr("checked")) {
    var item = [];
    item[0] = element.value;
    item[1] = element.name;
    aData.push(item);
    console.log(aData);
}

循环的每个迭代都在修改相同 item数组。您推到aData的每个item不过是对同一var item的引用。

较短的选项不是完全创建一个临时变量：

if ($(this).attr("checked")) {
    aData.push([element.value, element.name]);
    console.log(aData);
}

这是一个说明问题的示例：

var item = ['foo'];   // Just like your `item`
var list = [];
while(list.length < 5)
  list.push(item);    // Add it to the list 5 times
console.log(JSON.stringify(list));
list[0][0] = 'bar';   // Edit the first `item` in the list's contents
console.log(JSON.stringify(list));

list中的每个 item只是对 same same var item的引用。

您正在更新和按回调函数中的相同数组参考。而是在回调中使用局部变量或直接生成数组，然后推到aData数组。

尽管您可以在回调内使用this引用该元素，因此无需使用回调参数。

var aData = [];
$(".providers_chk").each(function () {
  if (this.checked) { // check the checked property
     aData.push([this.value, this.name]);
   }
});

$('.providers_chk').change(function() {
  var aData = [];
  $(".providers_chk").each(function() {
    if (this.checked) {
      aData.push([this.value, this.name]);
    }
  });
  console.log(aData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="abc" class="providers_chk" value="1" />
<input type="checkbox" name="abc" class="providers_chk" value="2" />
<input type="checkbox" name="abc" class="providers_chk" value="3" />
<input type="checkbox" name="abc" class="providers_chk" value="4" />
<input type="checkbox" name="abc" class="providers_chk" value="5" />
<input type="checkbox" name="abc" class="providers_chk" value="6" />
<input type="checkbox" name="abc" class="providers_chk" value="7" />

可以使用:checked伪级选择器来删除if条件，该选择器有助于仅选择检查元素。

var aData = [];
$(".providers_chk:checked").each(function () {
   aData.push([this.value, this.name]);
});

$('.providers_chk').change(function() {
  var aData = [];
  $(".providers_chk:checked").each(function() {
    aData.push([this.value, this.name]);
  });
  console.log(aData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="abc" class="providers_chk" value="1" />
<input type="checkbox" name="abc" class="providers_chk" value="2" />
<input type="checkbox" name="abc" class="providers_chk" value="3" />
<input type="checkbox" name="abc" class="providers_chk" value="4" />
<input type="checkbox" name="abc" class="providers_chk" value="5" />
<input type="checkbox" name="abc" class="providers_chk" value="6" />
<input type="checkbox" name="abc" class="providers_chk" value="7" />

或者您可以使用jQuery.map方法和:checked伪级选择器使其更简单。

var aData = $.map($(".providers_chk:checked"), function(e) {
  return [e.value, e.name];
});

$('.providers_chk').change(function() {
  var aData = $.map($(".providers_chk:checked"), function(e) {
    return [e.value, e.name];
  });
  console.log(aData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="abc" class="providers_chk" value="1" />
<input type="checkbox" name="abc" class="providers_chk" value="2" />
<input type="checkbox" name="abc" class="providers_chk" value="3" />
<input type="checkbox" name="abc" class="providers_chk" value="4" />
<input type="checkbox" name="abc" class="providers_chk" value="5" />
<input type="checkbox" name="abc" class="providers_chk" value="6" />
<input type="checkbox" name="abc" class="providers_chk" value="7" />

使用.map()功能根据选择器的每个匹配元素返回数组。在回调中，您应该返回一个新数组，而不是重复使用与代码中相同的数组。

var aData = $('.providers_chk:checked').map(function() {
    return [[this.value, this.name]];
}).get();

嵌套阵列是必要的，因为jQuery会自动扁平一个返回的数组，因此您必须以额外的级别包装它，以便在最终结果中获得二维数组。

  var aData = [];
  $(".providers_chk").each(function (index, element) {
  if ($(this).attr("checked")) 
  {
    var item = new Object();
    item[0] = element.value;
    item[1] = element.name;
    aData.push(item);
    console.log(aData);
   }
  });

希望它对您有用：）

相关内容

最新更新

热门标签：