jQuery.data 只保存最后一个元素的数据

Question

我正在尝试使用jQuery.data() 并将对象保存到我的 HTML 元素中。每次我将一个列表元素添加到我的无序列表时，它只会将最后一个对象保存到特定的 li 元素中。其他所有 li-Elements 保存的数据都会被丢弃！

我已经构建了一个小示例。 JSBin-Example

在左侧，我创建了一个列表，其中保存了一个对象。在右边我试图显示与对象相关的数据。

为什么它只显示与最后一个 HTML 元素相关的对象？

工作示例：
JSBin-Example

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