从Javascript对象中删除数组

Question

背景

我正在尝试实现一个功能，即当用户在表中单击复选框时，应将复选框的属性value和data-title作为新键值对数组元素存储在JS对象文字命名的selected中。

如果用户第二次单击相同的复选框，则应删除相应的数组元素。

问题

第一次单击复选框时，按预期在对象selected中创建了一个数组。

然而，当第二次单击相同的复选框时，不是删除相应的数组，而是添加了一个新的重复的数组。

代码

var selected = {items:[]};     
$('#table').on('click', 'input[type="checkbox"]', function() {
    var found = false;
    $.each(selected.items, function(i, val) {
        if (val.key == $(this).attr("value")) {
            selected.items.splice(i ,1);
            found = true;
            return false; //step out of each()
        }
    });

    if (found == false) {
        selected.items.push({key: $(this).attr("value"), value: $(this).attr("data-title")});
    }

    console.log(selected);
});

- Sam32

---

为什么不将其依赖于复选框的“checked”状态呢？我假设您的数组应该表示当前已选中的框。 - KWeiss

这很可能是与 val.key == $(this).attr("value") 有关的问题。这很可能（可能是由于Javascript中相等性的奇怪性质），永远不会返回true。你应该也使用 ===。调试你的javascript并检查这个问题。 - Liam

很好的问题，顺便说一句，做得好。如果每个声望低的用户都能这么体贴就好了。 - Liam

在$.each回调函数中，this等于什么？ - Davin Tryon

只需重新构建数组。另一个选项是检查已选状态。如果已选，则执行您正在执行的操作。如果未选中，请循环查找匹配项并删除该索引。 - epascarello

Answer 1

您在使用each时，this的上下文错误。它不再是点击处理程序中的元素。

请尝试：

$('#table').on('click', 'input[type="checkbox"]', function() {
    var found = false;
    var value = $(this).val();// store value from `this` before entering `each`
    $.each(selected.items, function(i, val) {
        if (val.key == value) {
            selected.items.splice(i ,1);
            found = true;
            return false; //step out of each()
        }
    });
    ....

- charlietfl

---

这正是问题的根本原因。 - Sam32

@Sam32 应该像Liam指出的那样明确使用 ===。我不想大幅改变你的代码...只是指出“为什么”有时比学习所有新方法并没有解决原始问题更重要。 - charlietfl

Answer 2

首先，我建议使用键值对对象，因为这样查找起来更加方便。

var selected = { items : {} };

这样你就可以使用以下方式访问你选择的项目：

selected.items[my.key]

也许是类似这样的东西...

var selected = {items:{}};     
$('#table').on('change', 'input[type="checkbox"]', function() {
    var checked = $(this).is(":checked"),
        title = $(this).data("data-title"),
        value = $(this).val();

    if (checked && !selected.items[value])
        selected.items[value] = title;
    else if (!checked && !!selected.items[value])
        delete selected.items[value];
});

- Luke

Answer 3

这个怎么样？

var selected = { items:[] };

$('#table').on('click', 'input[type="checkbox"]', function() {
    selected.items = $('#table input[type="checkbox"]:checked').map(function(){
        return {
            key: $(this).attr('value'),
            value: $(this).attr('data-title')
        }
    }).toArray()
});

- Thomas