将对象推送到数组，对象覆盖前一个对象

Question

我正在尝试将对象 resultOBJ 推送到数组 resultArray 单击“Добавить обозначение”按钮时。第一个对象已发送好，数据与我要查找的相同，但是当我推送另一个对象时，第二个对象正在重写前一个对象，第三个对象正在重写第一个和第二个对象，依此类推。这是我的代码。请告诉我我做错了什么。提前致谢。

var color = {red:"#ff0000",purple:"#990099",green:"#33cc33",yellow:"#ffff00",blue:"#0000ff",orange:"#ff8000",pink:"#ff0080",
          skyblue:"#00ffff",black:"#000000",gray:"#808080",brown:"#4d1f00"};

      var diams = ["60","65","68","69","70","75","76","80","81","82","85","90"];

      //show hidden elements
      $(document).ready(function(){
          $("#addRowDDL").click(function(){
              $("#DDL,#deleteRowDDl,#useIt").fadeIn("slow");
          });
      });

        var resultOBJ=new Object();            
        var resultArray = new Array();
        var finalobj = {} ;  
        var obj = new Object();            
      function addDropDownLists(){
          
          var myObject = $("#htmltoget").children().clone();
          $("#DDL").append(myObject);

          $.each(diams,function(key,value){
              myObject.find(".chooseDiams").append($("<option></option>").attr("value",key)
                .text(value));
          });

          $.each(color,function(key,value){
              myObject.find(".chooseColor").append($("<option></option>").attr("value",key)
                .text(key));
          });

          myObject.find(".chooseColor").change(function(){

              displayColors(this);
          });
          myObject.find(".chooseDiams").change(function(){
              displayDiams(this);
              
          });  

              resultArray.push(obj);

      }//End of addDropDownLists function
 function displayColors(param){
          var colorValues = $(param).val();
          resultOBJ.color=colorValues;
          
      }
 function displayDiams(param){
        var  diamsValues = $(param).val() || [];
        resultOBJ.diams=diamsValues;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div id="htmltoget" style="display: none;">
<div class="DDL-Con">
    <div class="diams">
        <p>Диаметр</p>
        <select class="chooseDiams" multiple>
          <option selected hidden> Выбрать Диаметр</option>
        </select>        
    </div>
    <div class="color">
        <p>Цвет</p>
        <select class="chooseColor">
          <option selected hidden>Выбрать Цвет</option>
        </select>
    </div>
</div>
</div>

<button type="button" id="addRowDDL" onclick="addDropDownLists()" style="margin-bottom: 20px;">Добавить обозначение</button>
 <div id="bigwrapper">
  <div id="DDL">        
  </div>      
  </div>
</body>

Answer 1

你不推resultOBJ，你推obj，它总是空的，因为你在初始化后没有对它做任何事情。

当您每次推送 obj 时，您只是推送对同一实例的引用，而不是创建一个新实例。对 obj 的任何更改都会影响 resultArray.

中的所有项目

在更改处理程序中，您始终会更新 resultOBJ 的同一实例，并且此更新始终会覆盖之前的更改。实际上，此对象中的值表示 "last selected color anywhere" 和 "last selected diam anywhere".

像这样的东西应该可以工作：

var resultArray = [];
function renderOption(value, name) {
    var option = document.createElement("option");
    option.value = value;
    option.innerHTML = undefined === name ? value : name;
    return option;
}

function updateResult(index) {
    var item = resultArray[index], 
        node = document.querySelector("#DDL").childNodes.item(index);
    item.diam = node.querySelector(".chooseDiams").value;
    item.color = node.querySelector(".chooseColor").value;
}

function addDropDownLists() {

    var container = document.querySelector("#DDL"),
        index = resultArray.length,
        changeHandler = updateResult.bind(null, index),
        tpl = document.querySelector(".DDL-Con"),
        node = tpl.cloneNode(true),
        list, key, len
    ;

    list = node.querySelector(".chooseDiams");
    for (key = 0, len = diams.length; key < len; key++) {
        list.appendChild(renderOption(diams[key]));
    }
    list.onchange = changeHandler;

    list = node.querySelector(".chooseColor");
    for (key in color) {
        list.appendChild(renderOption(key, color[key]));
    }
    list.onchange = changeHandler;

    container.appendChild(node);
    resultArray.push({
        diam: null,
        color: null
    });
    updateResult(index);
}

PS：不好意思，我看你用的是jQuery……懒得记了是API。好久没用了。希望您能抓住主要思想。

PPS：如果你打算删除项目，也许最好绑定整个节点并通过isSameNode()方法搜索它的索引。删除item后绑定的索引会失效，会移位

Answer 2

很难说出你想要完成什么，但你按下了 obj，它是空的，应该给你一个空对象数组。

此外，您需要为 addDropDownLists() 的每次调用创建一个新对象，否则您只是传递一个引用，更改将影响数组中的每个对象。

//show hidden elements
$(document).ready(function(){
      $("#addRowDDL").click(function(){
          $("#DDL,#deleteRowDDl,#useIt").fadeIn("slow");
          addDropDownLists();
      });
});

var resultArray = new Array();

  function addDropDownLists(){
      var resultOBJ=new Object(); 

      var myObject = $("#htmltoget").children().clone();
      $("#DDL").append(myObject);

      $.each(diams,function(key,value){
          myObject.find(".chooseDiams").append($("<option></option>").attr("value",key)
            .text(value));
      });

      $.each(color,function(key,value){
          myObject.find(".chooseColor").append($("<option></option>").attr("value",key)
            .text(key));
      });

      myObject.find(".chooseColor").change(function(){
          resultOBJ.color = $(this).val();
      });
      myObject.find(".chooseDiams").change(function(){
          resultOBJ.diams = $(this).val() || [];     
      });  

          resultArray.push(resultOBJ);
                        console.log(JSON.stringify(resultArray));
  }//End of addDropDownLists function

此设置会在第一次单击按钮时或没有任何变化时将一个空对象插入到数组中。不确定你想要完成什么，所以我保持原样。

演示：https://jsfiddle.net/3p37znq1/2/

将对象推送到数组，对象覆盖前一个对象

Push an object to array, obejct overwritting the previos one

javascript

arrays

jquery

push

object