javascript/jquery：单击将相关数组项复制到新数组

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'。

然后我将使用不同的值使 HTML 与 'newArrayList' 不同。所以在 makeBox 函数中我不会显示值 "info"，但是当我从 newArrayList 生成 HTML 时我会。我可以使用 innerHTML 将数据从 HTML 返回到 newArrayList，但必须将 "info" 附加到隐藏的跨度或其他内容。这似乎是一个漫长的过程。那么简单的方法是什么？

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

Answer 1

所以几点说明：

它不是数组的数组。它是一个对象数组。 [ ] 块是一个数组。 { } 是一个对象。
$('ul') 将 select 页面上的所有 uls，不一定只是一个你想要的。

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

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);
  }
}

Answer 2

Shaun 的解决方案在正确实施后应该有效（您的努力加一分）。

这是另一种方法。

我修改了您的 (OP) 函数，因此可以重复用于其他相同类型的数组。由于您正在学习，我鼓励您继续阅读 DRY principle a.k.a。 "don't repeat yourself"。在设计代码时坚持这一原则，将帮助您编写更可重用的代码，从而使代码更短，更长运行更易于维护的代码库。在此过程中，您将成为更好的编码员。

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

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

var firstListClass = "first_list_item";
var secondListClass = "second_list_item";

makeBox(arraylist,'.ul_one',firstListClass);
$("."+firstListClass).click(function(){
 copyArray(arraylist,newArrayList);    
    makeBox(newArrayList,'.ul_two',secondListClass);
});

function copyArray(sourceArray, targetArray)
{
   sourceArray.forEach(function(item){
       //for demo purpose only
       item.title="new title " + item.id;
       targetArray.push(item);
   });}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>first array result</p>
<ul class='ul_one'></ul>
<p>new array result</p>
<ul class='ul_two'></ul>

javascript/jquery：单击将相关数组项复制到新数组

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

html

javascript

arrays

jquery

onclick