在html数据属性中存储数组

http://jsfiddle.net/4px4whk0/
I have two question

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

when first click the checkbox (a), the first console.log should be print the dom with empty data-selected-list attribute, I don't know why it filled what I click already (["a"]) ?
I have to set timeout wrap the container.attr('data-selected-list', selectedList); then it works like what I want.

当第一次单击复选框(a)时,第一个console.log应该打印带有空数据选择列表属性的dom,我不知道为什么它填充了我已点击的内容([“a”])?我必须设置超时包装container.attr('data-selected-list',selectedList);然后它就像我想要的那样工作。
when click other checkbox (b), I hope it will be ["a","b"] store in attribute. but it only store ["b"] , why?

当点击其他复选框(b)时,我希望它将属于[“a”,“b”]商店。但它只存储[“b”],为什么?

I hope it can be solve by store data in html attribute not only store in jquery data api

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

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

<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>

1 个解决方案

#1

You have several mistakes:

你有几个错误:

if you want to print the results of your array before you change it, then move the console.log call to before you push to the array

如果要在更改阵列之前打印阵列的结果,请在推送到阵列之前将console.log调用移至

you were using attr and data interchangeably. These do two different things. attr stores the data in the DOM and data is a jquery method that stores the data somewhere within jquery itself.

你可以互换地使用attr和数据。这些做了两件事。 attr将数据存储在DOM中,而data是一个jquery方法,它将数据存储在jquery本身的某个地方。

finally, if you're using attr you need to do JSON.stringify to serialize your array before storing it (which you did do correctly) but when you pull the data out of the DOM you have to convert it back to an array with JSON.parse

最后,如果你正在使用attr你需要做JSON.stringify来存储它之前序列化你的数组(你做的正确)但是当你从DOM中提取数据时你必须将它转换回带有JSON的数组.parse

jquery's attr returns undefined for an undefined DOM tag, not empty string

jquery的attr为未定义的DOM标记返回undefined,而不是空字符串

the right solution with these problems fixed is:

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

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

});

here's a fiddle: http://jsfiddle.net/yLz6uv1q/

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

#1