我想我错过了一个明显的答案。我有一个数组数组,像这样
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”附加到隐藏范围或其他内容。这似乎是一条漫长的道路。那么简单的方法是什么?
我刚刚学习,所以对我放轻松。也进行了很好的搜索,但找不到答案。如果已经存在,请礼貌地指导我。
最佳答案
一些注意事项:
- 它不是数组的数组。它是一个对象数组。
[ ]
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);
}
}
关于javascript/jquery : on click copy relevant array items to new array,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33588204/