javascript/jquery : on click copy relevant array items to new array

Question

我想我错过了一个明显的答案。我有一个数组数组，像这样

var arraylist = [
    {
    "id" = 0,
    "title" = "title number 1",
    "info" = "some info etc 1"
    },
    {
    "id" = 1,
    "title" = "title number 2",
    "info" = "some info etc 2"
    },
]

...等等。还有一个函数，从每个数组中生成一些 html，并将其附加到 ul 元素。

function makeBox(){
    for (i = 0; i < arraylist.length; i++ ) {
        var boxHTML = '<li id="' + arraylist[i].id + '">'
            + '<div>' + arraylist[i].title + '</div>'
            + '</li>'
        $('ul').append(boxHTML);
    };
};

现在使用单击函数，单击“li”时，我希望将 arraylist 中的相关数组复制到新数组。

newArrayList = []

因此，单击 li #0 会将第一个数组从“arraylist”复制到“newArrayList”。

然后我将使用不同的值从“newArrayList”制作不同的 HTML。因此，在 makeBox 函数中，我不会显示值“info”，但当我从 newArrayList 生成 HTML 时，我会显示该值。我可以使用innerHTML 将数据从HTML 中返回到newArrayList，但必须将“info”附加到隐藏范围或其他内容。这似乎是一条漫长的道路。那么简单的方法是什么？

我刚刚学习，所以对我放轻松。也进行了很好的搜索，但找不到答案。如果已经存在，请礼貌地指导我。

Answer 1

一些注意事项:

• 它不是数组的数组。它是一个对象数组。 [ ] block 是一个数组。 { } 是一个对象。
• $('ul') 将选择页面上的所有 ul，而不必只是选择一个你想要的。

• 对象结构不正确，应该使用冒号(:)大于等于 (=) 个字符。它应该看起来更像这样:

  var arraylist = [{
      "id": 0,
      "title": "title number 1",
      "info": "some info etc 1"
  }, {
      "id": 1,
      "title": "title number 2",
      "info": "some info etc 2"
  }]
  

这是您的函数的修改版本。

function makeBox(){
  var $ul = $('ul.from_array_one');
  for (var i = 0; i < arraylist.length; i++) {
    var item = arraylist[i];
    var $boxHTML = $('<li id="' + item.id + '">' + item.title + '</li>');
    $boxHTML.click(onSelectItem(item));
    $ul.append($boxHTML);
  };
};

如果存在接受数组对象项的新函数，例如:

function onSelectItem( item ){
  return function(){
    var $ul2 = $('ul.from_array_two');
    var $boxHTML2 = $('<li id="' + item.id + '">' + item.info + '</li>');
    $ul2.append($boxHTML2);
  }
}