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

我试图在单击按钮“添加数组”时将对象resultOBJ推送到数组resultArray 。第一个对象发送得很好，数据与我正在查找的数据相同，但是当我推入另一个对象时，第二个对象重写前一个对象，第三个对象重写第一个和第二个对象，依此类推。这是我的代码。请告诉我我做错了什么。在此先感谢。将一个对象推到数组中，obejct覆盖前一个

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>

来源

2017-08-11 Zain Deeb

某些代码似乎被切断，因为这么认为它是一个HTML标记在后。只能通过点击编辑才能看到。 –

每次调用addDropDownLists时，您都应该创建一个新对象，不仅在全局范围内一次，否则您将重新使用并覆盖原始对象的属性。 – James

很难告诉你想要完成什么，但是你推动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/

来源

2017-08-11 19:34:56 Sunden

它的工作原理。万分感谢。如果你有一个想法，我怎样才能删除我推入到我的数组中的最后一个对象，我打算使用resultArray.pop（resultOBJ）; 有没有更好的建议？谢谢！ –

你的意思是你想要在开始时删除那个空对象，或者实际上删除添加到'resultArray'的最后一个对象？ – Sunden

最后一个添加到resultArray的对象，因此开始时的空对象被具有所需值的函数覆盖。 –

你不推resultOBJ，你推obj因为你不初始化之后用它做任何事情总是空的。

当您每次按下obj时，只需将一个引用推送到同一个实例，而不是创建一个新引用。对obj的任何更改都将影响resultArray中的所有项目。

在更改处理程序中，您始终更新同一个resultOBJ实例，并且此更新总是覆盖以前的更改。实际上，这个对象中的值意味着“最后选择的颜色在任何地方”和“最后选择的直径在任何地方”。

像这样的东西应该工作：

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()方法绑定整个节点并搜索索引。删除项目后，绑定索引将失效，它们将会移动。

来源

2017-08-11 19:26:19

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

回答

相关问题