Korzystam z szybkiej wtyczki jQuery. Muszę pobrać identyfikator danych klikniętego elementu i przekazać go do serwisu internetowego. Jak uzyskać atrybut data-id? Korzystam z tej .on()
metody, aby ponownie powiązać zdarzenie kliknięcia dla posortowanych elementów.
$("#list li").on('click', function() {
// ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
alert($(this).attr("#data-id"));
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<ul id="list" class="grid">
<li data-id="id-40" class="win">
<a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
<img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
</a>
</li>
</ul>
javascript
jquery
custom-data-attribute
Bruce Adams
źródło
źródło
on()
metody, ponieważlive()
jest już przestarzała, a to pytanie przyciąga sporo osób.Odpowiedzi:
Aby uzyskać zawartość atrybutu
data-id
(jak w<a data-id="123">link</a>
) musisz użyćlub
.data()
(jeśli używasz nowszej wersji jQuery> = 1.4.3)a następna część
data-
musi być pisana małymi literami, np.data-idNum
nie będzie działać, aledata-idnum
będzie.źródło
attr()
ponieważ jQuery usuwał wiodące zera z kodów pocztowych za pomocądata()
, TFM mówi: „Od jQuery 1.4.3 HTML 5 atrybuty danych będą automatycznie pobierane do obiektu danych jQuery. ... Każda próba konwersji łańcucha na wartość JavaScript (obejmuje to wartości logiczne, liczby, obiekty, tablice i null). Wartość jest przekształcana na liczbę tylko wtedy, gdy nie zmienia to reprezentacji wartości. Na przykład „1E02” i „100 000” są równoważne jako liczby (wartość liczbowa 100), ale ich konwersja zmieniłaby ich reprezentację, więc pozostałyby jako ciągi znaków. ”$(this).data().id //returns 123
Jeśli chcemy pobrać lub zaktualizować te atrybuty przy użyciu istniejącego, natywnego JavaScript , możemy to zrobić za pomocą metod getAttribute i setAttribute, jak pokazano poniżej:
Poprzez JavaScript
Poprzez jQuery
Przeczytaj tę dokumentację
źródło
Ważna uwaga. Należy pamiętać, że jeśli dynamicznie dostosujesz
data-
atrybut za pomocą JavaScript, NIE zostanie on odzwierciedlony wdata()
funkcji jQuery. Musisz to również dostosować za pomocądata()
funkcji.js:
źródło
Jeśli nie martwisz się o stare przeglądarki IE, możesz także użyć interfejsu API zestawu danych HTML5
HTML
JS
Demo: http://html5demos.com/dataset
Pełna lista obsługiwanych przeglądarek: http://caniuse.com/#feat=dataset
źródło
Zaskoczony nikt nie wspomniał:
Oto działający przykład: https://jsfiddle.net/ed5axgvk/1/
źródło
HTML
JS
lub
Pracuje dla mnie!
źródło
Używam $ .data - http://api.jquery.com/jquery.data/
źródło
pracuje dla mnie!
źródło
Dostęp do własnego atrybutu danych
id
jest dla mnie trochę łatwy.$("#Id").data("attribute");
źródło
Ten fragment kodu zwróci wartość atrybutów danych np .: data-id, data-time, data-name itd., Pokazałem dla id
js:
// pobierz wartość identyfikatora danych -> a1
// zmieni to identyfikator danych -> a2
// pobierz wartość id-danych -> a2
źródło
przy użyciu jQuery:
źródło
Dla tych, którzy chcą dynamicznie usunąć i ponownie włączyć etykietkę, możesz użyć metod
dispose
ienable
. Zobacz https://getbootstrap.com/docs/4.0/components/tooltips/#tooltipdisposeźródło
Mam rozpiętość. Chcę wziąć wartość atrybutu data-txt-lang, która jest używana zdefiniowana.
źródło
Problem polega na tym, że nie określasz opcji lub wybranej opcji listy rozwijanej lub listy, oto przykład listy rozwijanej, zakładam, że atrybut danych rekord danych.
źródło