Question

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

我已经建立了一个小例子。 JSBin-Example

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

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

工作示例：
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 id = testObject[testObject.length-1].id;
            listItems += liStart + id+"savedData" + liStart2;
            listItems += JSON.stringify($("#"+id).data());
            listItems += liEnd;
          //}
          savedData.innerHTML += listItems;

在你的更新列表函数中

template<typename... Args>
void f(const Args&... args)
{
}

int main()
{
   f<int>(1.0, 2, 3.0);
}

它解决了问题

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的数据

3 个答案:

工作示例

更新