javascript - Jquery 映射数组键和值

Question

我已经在其他 StackOverFlow 问题上对此进行了调查，但似乎找不到答案。

我有一个表格。

<input name="item[1]" class="item" value="1">
<input name="item[2]" class="item" value="50">
<input name="item[3]" class="item" value="12">

我正在尝试获取每个项目输入的结果并通过 Ajax 将它们发送到我的 Controller ，这在使用表单 action=""方法时很好但是通过 ajax 我似乎无法格式化数据数组格式。

谁能告诉我我做错了什么？

$('button#despatchOrder').on('click', function() {

    var values = $("input.items");

    var myArray = $.map(values, function(value, index) {
       return [value];
    });

    console.log(myArray);

});

不幸的是，Jquery 不是我最擅长的语言，但我正在学习。我期待输出是这样的。

items = [
 1 => 1,
 2 => 50,
 3 => 12
]

但是我有所有与输入相关的东西，比如

Input 1 = [
accept
accessKey
alt 
etc
etc
]

Answer 1

Can anyone tell me what I've done wrong?

很少! :-)

• 在您的 $.map 回调中，第一个参数是元素，而不是它的值，因此您只需使用它的 value 属性.
• 您还把它包装在一个数组中 (return [value])，这是您不想做的； $.map 将根据您从每次回调调用返回的值构建一个数组。
• 另外，您在需要 input.item 的地方使用了 input.items。

• 如果您不使用 index 参数，则无需声明它。

  $('button#despatchOrder').on('click', function() {

  var values = $("input.item");                          // ***
  
  var myArray = $.map(values, function(element) {        // ***
     return element.value;                               // ***
  });
  
  console.log(myArray);
  

  });

例子:

$('button#despatchOrder').on('click', function() {
    var values = $("input.item");
    var myArray = $.map(values, function(element) {
       return element.value;
    });
    console.log(myArray);
});

<input name="item[1]" class="item" value="1">
<input name="item[2]" class="item" value="50">
<input name="item[3]" class="item" value="12">
<button id="despatchOrder">Despatch</button><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用 item[1] 和这样的名称为您提供数组中的项目。你已经展示了你想要的东西

items = [
 1 => 1,
 2 => 50,
 3 => 12
]

不是有效的 JavaScript。以上为您提供:

myArray = ["1", "50", "12"];

但是如果你想要名称/值对，对象数组可能是最好的:

myArray = [
 {name: "1", value: "1"},
 {name: "2", value: "50"},
 {name: "3", value: "12"}
]

这样做:

    var myArray = $.map(values, function(element) {
       return {name: element.name.substring(5, 6), value: element.value};
    });

当然，如果您想要整个名称 item[1]，只需删除 substring 部分即可。

例子:

$('button#despatchOrder').on('click', function() {
    var values = $("input.item");
    var myArray = $.map(values, function(element) {
       return {name: element.name.substring(5, 6), value: element.value};
    });
    console.log(myArray);
});

<input name="item[1]" class="item" value="1">
<input name="item[2]" class="item" value="50">
<input name="item[3]" class="item" value="12">
<button id="despatchOrder">Despatch</button><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

只是为了完整起见，您还可以使用 other map 函数(jQuery 有两个)，但它在这里对您没有任何实际好处:

var myArray = values.map(function() {
    return this.value;
}).get();

注意最后的 .get()。