jQuery.data(key)throw undefined不是一个函数

Question

我有一些复选框,用于显示/隐藏列并自动调整它们以适应屏幕.我已使用数据属性将复选框链接到其相关列,并尝试使用jQuery.data()读取此值.这给出了"未定义不是函数"的错误,即使断点似乎表明我已经将变量正确设置到这一点.

HTML

<div class="col-xs-12">
    <span>Show or hide columns:</span>
    <input type="checkbox" checked="checked" id="column-selector" data-column="selectioncolumn" />Selection via dropdowns
    <input type="checkbox" checked="checked" id="column-selector" data-column="listcolumn" />Selected items
    <input type="checkbox" checked="checked" id="column-selector" data-column="mapcolumn" />Map
</div>

<div id="selectioncolumn" class="col-xs-4">
    Div 1
</div>
<div id="listcolumn" class="col-xs-4">
    Div 2
</div>
<div id="mapcolumn" class="col-xs-4">
    Div 3
</div>

jQuery的

$(document).ready(function () {
    $('#column-selector').on('change', function () {
        var numberOfColumns = $('#column-selector:checked').length;
        var sizeOfVisibleColumn = numberOfColumns === 0 ? 4 : 12 / numberOfColumns;
        var columnClass = 'col-xs-' + sizeOfVisibleColumn;
        $.each($('#column-selector'), function (i, checkbox) {
            var columnId = checkbox.data('column'); //Error occurs here
            //More stuff
        });
    });
});

通过设置断点,我可以看到已设置属性并填充了数据集.

但是,该行var columnId = checkbox.data('column');会导致错误"Uncaught TypeError:undefined is not a function".我做错了什么？

的jsfiddle

JQuery版本是2.1.1浏览器是Chrome 40.0.2214.111米

Answer 1

您需要将checkbox(即DOMElement)转换为jQueryObject

var columnId = $(checkbox).data('column');

更改checkbox.prop('checked')到$(checkbox).prop('checked')

同样在你的例子中有三个元素具有相同的id(id="column-selector"),我已经改为class(class="column-selector"),因为id 必须是唯一的

Example

Answer 2

您需要将复选框转换为jQuery元素:

 $.each($('#column-selector'), function (i, checkbox) {
    var columnId = $(checkbox).data('column'); //Error occurs here
    //More stuff
 });

Answer 3

您遇到的问题是在jQuery .each（）中传递给元素中第二个arg的元素，而不是 jQuery对象。尝试这个：

$.each($('#column-selector'), function (i, checkbox) {
    var columnId = $(checkbox).data('column'); //Error occurs here
    //More stuff
});