У меня есть некоторые флажки, которые используются для отображения/скрытия столбцов и автоматического изменения их размера в соответствии с экраном. Я связал флажки с их соответствующими столбцами, используя атрибут 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 не является функцией". Что я сделал неправильно?
JQuery версии 2.1.1 браузер Chrome 40.0.2214.111 м