JQuery.data(key) throw undefined не является функцией

У меня есть некоторые флажки, которые используются для отображения/скрытия столбцов и автоматического изменения их размера в соответствии с экраном. Я связал флажки с их соответствующими столбцами, используя атрибут data, и попытаюсь прочитать это значение, используя jQuery.data(). Это дает ошибку "undefined не является функцией", хотя точка останова, кажется, показывает, что я правильно установил свои переменные до этой точки.

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 не является функцией". Что я сделал неправильно?

JSFiddle

JQuery версии 2.1.1 браузер Chrome 40.0.2214.111 м

Ответ 1

Вам нужно преобразовать checkbox (который DOMElement) в jQuery Object

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

Измените checkbox.prop('checked') на $(checkbox).prop('checked')

Также в вашем примере есть три элемента с одинаковым идентификатором (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() элементом, переданным во втором arg, в элементе, не являющемся объектом jQuery. попробуйте следующее:

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

Ответ 4

Несколько дней назад у меня возникала аналогичная проблема, так что происходило всякий раз, когда я хотел получить идентификатор данных элемента html следующим образом: -

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

он выбрасывал эту ошибку: -

Uncaught TypeError: $(...). find (...) [0].data не является функцией (...)

На самом деле проблема find() [] не возвращает объект DOM javascript, поэтому вам нужно преобразовать его в элемент DOM для выполнения этих операций. Поэтому я сделал это →

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

только что добавил, что все это в $(), которое переводит их в объект DOM, на котором вы можете использовать связанные с Javascript элементы DOM.

Ответ 5

Не совсем ответ на ваш вопрос, но вы также можете получить доступ к текущему элементу с параметром this:

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

Кажется, что это заставляет его работать в вашем jFiddle