Di mảng từ đối tượng javascript

Question

Context

Tôi đang cố gắng để thực hiện một chức năng để khi người dùng nhấp vào một hộp kiểm trong một bảng, thuộc tính value và data-title của hộp kiểm sẽ được lưu trữ trong một JS đối tượng theo nghĩa đen có tên là selected làm phần tử mảng cặp khóa-giá trị mới.

Trong trường hợp người dùng nhấp lần thứ hai trên cùng một hộp kiểm, phần tử mảng tương ứng sẽ bị xóa.

Issue

Lần đầu tiên một hộp kiểm được nhấp, một mảng được tạo ra trong đối tượng selected như dự định.

Tuy nhiên, khi hộp kiểm tương tự được nhấp lần thứ hai, thay vì xóa mảng tương ứng, một số mới (lặp lại) được thêm.

Mã

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

Bạn có bối cảnh sai this bên each. nó không còn là yếu tố trong xử lý nhấp chuột

Hãy thử

$('#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

Trước tiên, tôi muốn giới thiệu để sử dụng một đối tượng giá trị khóa cặp, vì nó là cách dễ dàng hơn để tra cứu.

var selected = { items : {} }; 

cách này, bạn sẽ truy cập vào các mục đã chọn bằng cách sử dụng

selected.items[my.key] 

lẽ somethink như thế này ...

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

thế nào về vấn đề này một:

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