Javascript将数组添加到数组对象 - 问题总是推送相同的值

Posted 2023-05-09

【中文标题】Javascript将数组添加到数组对象 - 问题总是推送相同的值

【英文标题】：Javascript add arrays to array object - problem pushing always the same value

【发布时间】：2019-04-12 21:48:52

【问题描述】：

我的 javascript 代码有问题： 我正在创建一个带有动态添加元素的表单，并从该表单中读取值

<div class="product" value="1">
  <br />
  <h4>Pytania dodatkowe lecz obowiązkowe :3</h4>    
  <div class="inputbox left-label required">
    <label for="price" class="rating">price</label>
    <div class="tint-rating" id="" data-input="price0" name="price" value="5"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="functionality" class="rating">Funcionality</label>
    <div class="tint-rating" data-input="functionality0" name="functionality" value="5"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="design" class="rating">Design</label>
    <div class="tint-rating" data-input="design0" name="design" value="5"></div>
  </div>   
</div>    
<div class="product" value="2">
  <br />
  <h4>Pytania dodatkowe lecz obowiązkowe :3</h4>    
  <div class="inputbox left-label required">
    <label for="price" class="rating">price</label>
    <div class="tint-rating" id="" data-input="price1" name="price" value="6"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="functionality" class="rating">Funcionality</label>
    <div class="tint-rating" data-input="functionality1" name="functionality" value="3"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="design" class="rating">Design</label>
    <div class="tint-rating" data-input="design1" name="design" value="8"></div>
  </div>    
</div>    
<div class="product" value="3">
  <br />
  <h4>Pytania dodatkowe lecz obowiązkowe :3</h4>    
  <div class="inputbox left-label required">
    <label for="price" class="rating">price</label>
    <div class="tint-rating" id="" data-input="price0" name="price" value="1"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="functionality" class="rating">Funcionality</label>
    <div class="tint-rating" data-input="functionality1" name="functionality" value="2"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="design" class="rating">Design</label>
    <div class="tint-rating" data-input="design1" name="design" value="3"></div>
  </div>    
</div>

这是从表单读取值的代码：

var arr = [], rate = ;      
products = [];

$.each($('.product'), function(i, product)     
  $('.tint-rating', product).each(function() 
    var x = $(this).attr("name")
       ,y = $(this).attr("value");     
    rate[x] = y;     
  );    
  products.push(rate);    //Move this line into inside the inner .each loop
);

问题是脚本推送到表单元素的数组计数元素，但所有值都来自最后一个（来自示例）：

0: 
1:
rate: price: "1", functionality: "2", design: "3"
__proto__: Object
2:
rate: price: "1", functionality: "2", design: "3"
__proto__: Object
3:
rate: price: "1", functionality: "2", design: "3"
__proto__: Object
length: 4

我需要来自表单所有元素的值，不仅是持久的，像这样：

 0: 
    1:
    rate: price: "5", functionality: "5", design: "5"
    __proto__: Object
    2:
    rate: price: "6", functionality: "3", design: "8"
    __proto__: Object
    3:
    rate: price: "1", functionality: "2", design: "3"
    __proto__: Object
    length: 4

如果有人知道我的脚本有什么问题，请帮助我， 非常感谢您！

【问题讨论】：

在products.push(oceny); 中，oceny 是什么？不应该是rate吗？

@nrgwsth，同意，代码没有意义，缺少 oceny！您还应该将行 products.push 移到 .each 循环函数内。

如果您想要求输入 value $(this).attr("value") 不会反映用户在初始呈现页面后可能所做的任何更改。如果您想要这些，请使用值 property，而不是 attribute。

请附上您希望看到的代码示例。

【参考方案1】：

将您的代码修改为：

    products = [];
    $.each($('.product'), function(i, product)     
      var item = ;
      $('.tint-rating', product).each(function() 
        item[$(this).attr("name")] = $(this).attr("value");
      );    
      products.push(item);
    );

这应该给你：

    ["price":5, "functionality":5, "design":5
    ,"price":6, "functionality":3, "design":8
    ,"price":1, "functionality":2, "design":3]

@Dean Marketing：非常感谢，它有效！ :))