从javascript对象

Question

上下文

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

如果用户在同一个复选框上再次单击，则应删除相应的数组元素。

问题

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

但是，当第二次点击相同的复选框时，会添加一个新的（重复的），而不是删除相应的数组。

代码

selected

Answer 1

this内each的上下文错误。它不再是点击处理程序中的元素

尝试

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

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

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