Question

我正在尝试将对象从click事件推送到数组。虽然模板显示多个对象，但该数组似乎只包含一个对象。

我有数据属性的html将特许经营权ID和名称值传递给控制器中的twig模板，如下所示：

<a
    data-id="{{ franchise.franchise_id }}"
    data-name="{{ franchise.franchise_name }}"
    class="btn add-to-list">
    Add to List
</a>

此代码根据查询结果重复。

当点击锚标记时，id和name存储在变量中，变量被放入一个对象（特许经营）中，然后被推送到数组（特许经营）。这是jQuery：

$(".add-to-list").on('click', () => {
    let franchises = [];
    let franchise;

    let id = $(this).data("id");
    let name = $(this).data("name");

    franchise = {
        'id': id,
        'name': name
    };

    franchises.push(franchise);

    $.each(franchises, (index, value) => {
        $("#choices").append('<a class="list-group-item" id='+value.id+'> ' + value.name + '<span class="pull-right">&times;</span></a>');
    });
});

特许经营数组通过循环播放，数据显示在模板中。结果显示数组中有多个项目，但console.log（franchises.length）在每次单击锚标记后显示一个项目。似乎在单击第二个项目后，它在模板中显示控制台日志应显示一个包含两个对象的数组，而不是包含我刚刚单击的对象数据的数组。

console.log与两次不同锚标记的点击一起显示：

Add to List clicked!
====== start ============
{id: 2, name: "Crunch"}
franchises.length: 1
====== end ===========
Add to List clicked!
====== start ============
{id: 1, name: "Planet Fitness"}
franchises.length: 1
====== end ===========

如果有人能够识别我的错误，我将不胜感激。

谢谢！

Answer 1

每次点击.add-to-list元素时，您都会创建一个名为franchises的新变量。您需要在单击处理程序之外声明变量。

Answer 2

每次调用匿名箭头函数时，如果要添加特许经营数组，必须在函数定义之外声明特许经营数组，那么您正在重新创建特许经营数组。所以代码如下：

let franchises = [];
$(".add-to-list").on('click', () => {

let franchise;

let id = $(this).data("id");
let name = $(this).data("name");

franchise = {
    'id': id,
    'name': name
};

franchises.push(franchise);

$.each(franchises, (index, value) => {
    $("#choices").append('<a class="list-group-item" id='+value.id+'>
' + value.name + '<span class="pull-right">&times;</span></a>');
});
});

所以现在特许经营数组被定义在匿名函数的范围之外，并且仍然可以被匿名函数访问。请注意，污染全局命名空间被认为是不好的做法，因此您可能希望了解JavaScript中的闭包这里是一个链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

将对象添加到数组

2 个答案: