jQuery.data(key) 抛出 undefined 不是函数答案

【问题标题】：jQuery.data(key) throwing undefined is not a functionjQuery.data(key) 抛出 undefined 不是函数
【发布时间】：2017-03-30 17:00:27
【问题描述】：

我有一些复选框用于显示/隐藏列并自动调整它们的大小以适应屏幕。我已经使用数据属性将复选框链接到它们的相关列，并尝试使用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

【问题讨论】：

标签： jquery html custom-data-attribute

【解决方案1】：

您需要将checkbox（即DOMElement）转换为jQuery 对象

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

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

另外，在您的示例中，三个元素具有相同的 id (id="column-selector")，我已更改为类 (class="column-selector")，因为 id 必须是唯一的

Example

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您遇到的问题是在 jQuery .each() 元素中传递的第二个参数中的元素 not 是一个 jQuery 对象。试试这个：

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

【讨论】：

【解决方案4】：

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

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

它抛出了这个错误：-

Uncaught TypeError: $(...).find(...)[0].data is not a function(...)

实际上问题是 find()[] 没有返回 javascript DOM 对象，因此您必须将其转换为 DOM 元素才能进行这些操作，所以我这样做了 ->

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

刚刚添加了将整个内容放入 $() 中，将它们转换为一个 DOM 对象，您可以在该对象上执行 Javascript DOM 元素相关的方法。

【讨论】：

【解决方案5】：

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

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

这似乎使它在你的 jFiddle 中工作

【讨论】：