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

Question

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

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

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

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

工作示例：
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

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

jQuery.data only saves data from the last Element

html

javascript

data-binding

jquery

jquery-data

工作示例

更新