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

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

Answer 4

前几天我遇到了类似的问题， 所以每当我想通过这个获得html元素的数据id时会发生什么： -

$(document).find(".tile")[0].data("id")

它抛出了这个错误： -

  

未捕获的TypeError：$（...）。find（...）[0] .data不是函数（...）

实际上问题是find（）[]没有返回一个javascript DOM对象，所以你必须将它转换为DOM元素才能进行这些操作，所以我这样做了 - ＆gt;

$($(document).find(".tile")[0]).data("id")

刚刚添加了将整个内容放在 $（）中，将这些内容转换为DOM对象，您可以在其上执行与Javascript DOM元素相关的方法。

Answer 5

不是您问题的答案，但您也可以使用this参数访问当前元素：

  function (i) {
                var columnId = $(this).data('column');
                ...

这似乎使它在你的jFiddle中起作用