jQuery.data只保存最后一個Element的數據

Question

我正在嘗試使用jQuery.data（）並將對象保存到我的HTML元素。 每次我將list-Element添加到我的無序列表時，它只將最后一個對象保存到特定的li-Element。 每個其他li-Elements保存的數據都會被扔掉！

我已經構建了一個小例子。 JSBin-實施例

在左側，我創建了一個List，其中保存了一個Object。 在右側，我試圖顯示與對象相關的數據。

為什么它只顯示與最后一個HTML元素相關的Object？

工作范例：
JSBin-實施例

Answer 1

那是因為你正在修改包裝元素的innerHTML屬性。 發生的事情是在每次迭代中重新生成元素，刪除當前元素並且新元素沒有任何存儲數據。 使用innerHTML屬性是修改元素內容的最糟糕方式。 您只需要創建一個li元素並將其附加到包裝元素：

var random = 0;
// var testObject = [];

function addNewItem(){
  random += 1;
  var id = "testId" + random;
  var text = "This is my " + random + ". text";
  var data = {id: id, text: text};
  // testObject.push(data);
  // You can pass an object as the second argument 
  // to jQuery constructor and it calls the 
  // corresponding methods as setter
  $('<li></li>', {
      text: text + JSON.stringify(data),
      id: id,
      data: data
  }).appendTo('#listId'); 
}
// bind and trigger click event              
$("#add").on('click', addNewItem).click();

Answer 2

我變了

  for(var i = 0; i < testObject.length; i++){
        var listItem = "";
        var id = testObject[i].id;
        listItem += liStart + id + liStart2;
        listItem += testObject[i].text;
        listItem += liEnd;
        unorderedList.innerHTML += listItem;
        $("#"+id).data(testObject[i]);
      }

在你的更新列表功能中

  //for(var i = 0; i < testObject.length; i++){
            var id = testObject[testObject.length-1].id;
            listItems += liStart + id+"savedData" + liStart2;
            listItems += JSON.stringify($("#"+id).data());
            listItems += liEnd;
          //}
          savedData.innerHTML += listItems;

它解決了這個問題

Answer 3

為了幫助您理解我對這個問題的評論，我認為最好，我會舉一個例子來說明我的意思。

我沒有足夠的時間來完全解決這個問題，但是想給出一個我稱之為更易讀的代碼的例子。

我在函數頂部添加了所有變量。 如果您需要更改它們，這將允許您更快地閱讀和查找項目。

我還將很多字符串值合並到一個對象中，即li元素。

我之前從未使用$ .data（）作為對象，因此我並不知道如何使用它來設置updateSavedData() $('li') ，盡管console.log()確實顯示正確的鍵/值。

  $(document).ready(function(){
    var uID = 0;
    var testObject = [];
    var unorderedList = $("#listId");
    var savedList = $("#savedData");
    var TOL = 0; //TestObjectLength
    var textTemplate = "This is my [0] text!";

    function addNewItem(){
      uID++;
      testObject.push({id: uID, text: textTemplate.replace("[0]", uID)});
      TOL = testObject.length-1;
      updateList();
    }

    function updateList(){
      var li = $('<li>', { id: testObject[TOL].id, data: testObject[TOL], text: testObject[TOL].text });
      li.appendTo(unorderedList);
      updateSavedData(li.data());
    }

    function updateSavedData(li){
      console.log(JSON.stringify(li));
      $('<li>', JSON.stringify(li)).appendTo(savedList);
    }

    addNewItem();
    $("#add").on('click', addNewItem);
  });

---

工作實例

http://jsbin.com/ralizazahe/1/edit?js,console,output

任何想要取得進展的人都應該這樣做，因為我也想看看如何進一步發展。

---

更新

采取更多步驟並重構為此

  $(document).ready(function(){
    var $displayList = $("#listId");
    var $savedList = $("#savedData");

    var textTemplate = "This is my {0} text!";

    var uID = 0; //Unique ID
    var data = { id: null, text: null }; //Gives a reference

    function init(){
      uID++;
      data = { id: uID, text: textTemplate.replace("{0}", uID) };
    }

    function addNewItem(){
      init();
      $('<li>', data).appendTo($displayList);
      updateSavedData(data);
    }

    function updateSavedData(li){
      $('<li>', li).appendTo($savedList);
    }

    addNewItem();
    $("#add").on('click', addNewItem);
  });

http://jsbin.com/bajekagoli/1/edit?js,console,output