wake-up-neo.com

jQuery.data (Schlüssel), das undefined wirft, ist keine Funktion

Ich habe einige Kontrollkästchen, mit denen Spalten ein- und ausgeblendet und automatisch an den Bildschirm angepasst werden. Ich habe die Kontrollkästchen mithilfe eines Datenattributs mit ihren relevanten Spalten verknüpft und habe versucht, diesen Wert mithilfe von jQuery.data () zu lesen. Dies gibt einen Fehler von "undefined ist keine Funktion", obwohl ein Haltepunkt zu zeigen scheint, dass ich meine Variablen bis zu diesem Punkt richtig eingerichtet habe.

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

durch das Setzen eines Haltepunkts kann ich feststellen, dass das Attribut gesetzt und die Datenmenge aufgefüllt wurde.

attribute and dataset values

Die Zeile var columnId = checkbox.data('column'); führt jedoch zu dem Fehler "UncearctError: undefined ist keine Funktion". Was habe ich falsch gemacht?

JSFiddle

JQuery-Version ist 2.1.1. Der Browser ist Chrome 40.0.2214.111 m

13
Andy Nichols

Sie müssen checkbox (was DOMElement ist) in jQuery Object konvertieren 

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

checkbox.prop('checked') in $(checkbox).prop('checked') ändern

In Ihrem Beispiel gibt es auch drei Elemente mit derselben ID (id="column-selector"), die ich in class (class="column-selector") geändert habe, da id must eindeutig ist

Example

19
Alexander T.

Sie müssen das Kontrollkästchen in ein jQuery-Element umwandeln:

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

Das Problem, das Sie haben, ist in jQuery .each () das Element, das im zweiten Argument in einem Element not a jQuery-Objekt übergeben wurde. Versuche dies:

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

Vor einigen Tagen bekam ich ein ähnliches Problem, . Was also geschah, wenn ich eine Daten-ID eines HTML-Elements mit diesem Befehl abrufen wollte: - 

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

es warf diesen Fehler: - 

Nicht erfasster TypeError: $ (...). Find (...) [0] .data ist keine Funktion (…)

Eigentlich besteht das Problem darin, dass find () [] kein Javascript-DOM-Objekt zurückgibt, also müssen Sie es für diese Operation in ein DOM-Element konvertieren. Also habe ich dies getan -> 

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

fügen Sie einfach das gesamte Objekt in $ () ein, das diese in ein DOM-Objekt umwandelt, für das Sie mit Javascript-DOM-Elementen verwandte Methoden ausführen können.

2
Partha Roy

Nicht wirklich eine Antwort auf Ihre Frage, Sie können jedoch auch mit dem Parameter this auf das aktuelle Element zugreifen: 

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

Es scheint, dass dies in Ihrem jFiddle funktioniert

0
Arcturus