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

现在使用点击功能点击＆＃39; li＆＃39;我希望将arraylist中的相关数组复制到一个新数组中。

newArrayList = []

所以点击li＃0会复制第一个阵列来自＆＃39; arraylist＆＃39;到了'newArrayList＆＃39;。

然后，我将从＆＃39; newArrayList＆＃39;中制作不同的HTML。使用不同的值。所以在makeBox函数中，我不会显示值＆＃34; info＆＃34;，但是当我从newArrayList创建HTML时，我会。我可以使用innerHTML将数据从HTML中恢复到newArrayList，但是必须附加＆＃34; info＆＃34;到一个隐藏的跨度，或某事。这似乎是漫长的过程。那么简单的方法是什么？

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

Answer 1

所以注意几点：

这不是一个数组数组。这是一个对象数组。 [ ]块是一个数组。 { }是一个对象。
$('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);
  }
}

Answer 2

Shaun的解决方案应该在正确实施时起作用（一点是为了你的努力）。

这是另一种方式。

我修改了你的（OP＆＃39; s）函数，因此可以重用于其他相同类型的数组。由于您正在学习，我建议您阅读DRY principle a.k.a.＆＃34;不要重复自己＆＃34;。在设计代码时坚持这一原则，将帮助您编写更可重用的代码，从而缩短代码，从长远来看，代码库更易于维护。在这个过程中，你将成为一个更好的编码器。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: