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

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

本文关键字：数组 新数组 复制 javascript jquery 单击      更新时间：2023-09-26

我想我错过了一个显而易见的答案。我有一个数组，像这个

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，但必须将"信息"附加到隐藏的跨度或其他内容。这似乎是一条漫长的道路。那么，有什么简单的方法呢？

我只是在学习，所以请放心。我也做了很好的搜索，但找不到答案。如果已经有了，请礼貌地告诉我。

所以有几个注意事项：

  • 它不是一个数组。它是一组对象。[ ]块是一个数组。{ }是一个对象
  • $('ul')将选择页面上的所有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);
  }
}

Shaun的解决方案在正确实现时应该可以工作（这对您的工作来说是一点）。

这是另一种方式。

我修改了您的（OP）函数，以便可以重用于其他相同类型的数组。既然你在学习，我鼓励你多读DRY原则，也就是"不要重复自己"。在设计代码时坚持这一原则，将有助于编写更可重用的代码，从而缩短代码，从长远来看，提供更可维护的代码库。在这个过程中，你会成为一个更好的程序员。

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>

相关文章：