在html数据属性中存储数组

Question

http://jsfiddle.net/4px4whk0/
我有两个问题

1. 首次点击checkbox（a）时，第一个console.log应打印带有空data-selected-list属性的dom，我不知道为什么填充我点击的内容（[＆＃34; a＆＃34;]）？
   我必须设置超时换行container.attr('data-selected-list', selectedList);然后它就像我想要的那样工作。

2. 点击其他checkbox（b）时，我希望["a","b"]存储在属性中。但它只存储["b"]，为什么？

我希望它可以通过html属性中的商店数据来解决，不仅存储在jquery data api

中
＆＃13;
＆＃13;
$(document).ready(function() {
	$('.container').on('click', 'input[type="checkbox"]', function() {
        var container = $(this).closest('.container');
        var input = $(this);
        console.log(container);
        
        var selectedList = container.data('selected-list');
        if (selectedList == '') {
          selectedList = [];
        }
        
        
        if (input.is(":checked")) {
          selectedList.push(input.val());
        }
        
        console.log(selectedList);
        selectedList = JSON.stringify(selectedList);
        
        container.attr('data-selected-list', selectedList);
    });
    
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" data-selected-list="">
    <input type="checkbox" value="a">a
    <input type="checkbox" value="b">b
    <input type="checkbox" value="c">c
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

你有几个错误：

1. 如果您想在之前打印数组的结果，则更改它，然后在推送到数组之前将console.log调用移至
2. 您可以互换使用attr和data。这些做了两件事。 attr将数据存储在DOM中，data是一个jquery方法，用于将数据存储在jquery本身的某个位置。
3. 最后，如果您正在使用attr，则需要先执行JSON.stringify序列化数组，然后再将其存储（您确实正确执行），但是当您从DOM中提取数据时将其转换回JSON.parse
的数组
4. jquery的attr为未定义的DOM标记返回undefined，而不是空字符串

修复这些问题的正确解决方案是：

$(document).ready(function() {
    var container = $('.container');
    container.on('click', 'input[type="checkbox"]', function() {
        var input = $(this);
        console.log(container);

        var selectedList = container.attr('data-selected-list');
        if (!selectedList) {
          selectedList = [];
        }else{
          selectedList = JSON.parse(selectedList);
        }


        console.log(selectedList);
        if (input.is(":checked")) {
          selectedList.push(input.val());
        }

        selectedList = JSON.stringify(selectedList);

        container.attr('data-selected-list', selectedList);
    });

});

这是一个小提琴：http://jsfiddle.net/yLz6uv1q/