從javascript對象中刪除數組

Question

上下文

我正在嘗試實現一個功能，以便當用戶單擊表中的復選框時，復選框的屬性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);
});

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