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

Question

我有一些复选框用于显示/隐藏列并自动调整它们的大小以适合屏幕。我已使用数据属性将复选框链接到它们的相关列，并尝试使用 jQuery.data() 读取此值.这给出了“undefined is not a function”的错误，即使断点似乎显示我已经正确设置了我的变量到这一点。

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 m

Answer 1

您需要将 checkbox(即 DOMElement)转换为 jQuery 对象

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

将 checkbox.prop('checked') 更改为 $(checkbox).prop('checked')

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

Example