从 javascript 对象中删除数组答案

【问题标题】：Remove array from javascript object从 javascript 对象中删除数组
【发布时间】：2016-05-19 16:10:32
【问题描述】：

上下文

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

如果用户第二次点击同一个复选框，相应的数组元素应该被删除。

问题

第一次单击复选框时，会按预期在对象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);
});

【问题讨论】：

为什么不让它依赖于复选框的checked 状态呢？我假设您的数组应该代表当前选中的框。
val.key == $(this).attr("value") 可能有问题。这很可能（可能是由于 Javascript 中相等的奇怪性）永远不会返回 true。您可能也应该使用===。 Debug your javascript 并检查一下
问题写得很好顺便说一句，干得好。要是每个低代表用户都这么体贴就好了
在$.each 回调中，this 等于什么？
只需重建阵列。其他选项是检查选中状态。如果选中，请执行您正在执行的操作。如果未选中循环并找到匹配项并删除该索引。

标签： javascript jquery arrays checkbox

【解决方案1】：

这个怎么样：

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()
});

【讨论】：

【解决方案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];
});

【讨论】：

【解决方案3】：

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()
        }
    });
    ....

【讨论】：

这正是问题的根本原因。
@Sam32 应该明确使用===，正如 liam 指出的那样。我不想过多地更改您的代码...只需指出 “为什么”，这有时比学习所有新方法而不是找到原始问题的根源更重要