javascript - 将对象添加到数组

Question

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

我有带有数据属性的 html，可以将特许经营 id 和名称值从 Controller 传递到 Twig 模板，如下所示:

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

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

当 anchor 标记被点击时，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>');
    });
});

特许经营数组循环通过，数据显示在模板中。结果显示数组中不止一项，但每次单击 anchor 标记后，console.log(franchises.length) 都会显示一项。似乎在单击第二个项目并在模板中显示后，控制台日志应该显示一个包含两个对象的数组，而不是包含我刚刚单击的对象数据的数组。

console.log 会结合不同 anchor 标记上的两次点击来显示此内容:

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 的新变量。您需要在点击处理程序之外声明该变量。