wake-up-neo.com

jQuery: Datenattribut abrufen

In meiner HTML habe ich ein span Element:

<span class="field" data-fullText="This is a span element">This is a</span>

Und ich möchte das data-fullText-Attribut erhalten. Ich habe diese zwei Möglichkeiten ausprobiert, aber sie funktionierten nicht (die beiden geben undefined zurück):

$('.field').hover(function () {
    console.log('using prop(): ' + $(this).prop('data-fullText'));
    console.log('using data(): ' + $(this).data('fullText'));
});

Dann habe ich gesucht und diese Fragen gefunden: Wie bekomme ich das Attribut data-id? und Jquery kann den Datenattributwert nicht abrufen .
Die beiden Antworten sind "Use .attr('data-sth') or .data('sth')".
Ich weiß, dass .attr() veraltet ist (in jquery-1.11.0, das ich benutze), aber ich habe es versucht.
Und es hat funktioniert!

Kann jemand erklären warum?

javascriptjqueryhtmlcustom-data-attribute
64
Al.G.

Sie können die Funktion .attr() verwenden:

$(this).attr('data-fullText')

oder wenn Sie in Kleinbuchstaben den Attributnamen angeben:

data-fulltext="This is a span element"

dann können Sie die Funktion .data() verwenden:

$(this).data('fulltext')

Die Funktion .data() erwartet und arbeitet nur mit Kleinbuchstaben.

129
Darin Dimitrov

1. Versuchen Sie Folgendes: .attr ()

  $('.field').hover(function () {
    var value=$(this).attr('data-fullText');
  $(this).html(value);
});

DEMO 1:http://jsfiddle.net/hsakapandit/Jn4V3/

2. Versuchen Sie folgendes: .data ()

$('.field').hover(function () {
    var value=$(this).data('fulltext');
  $(this).html(value);
});

DEMO 2:http://jsfiddle.net/hsakapandit/Jn4V3/1/

4
mrdeveloper

Das funktioniert für mich

$('.someclass').click(function() {
    $varName = $(this).data('fulltext');
    console.log($varName);
});
1
Jack Barham

Ändern Sie IDs und Datenattribute nach Ihren Wünschen! 

  <select id="selectVehicle">
       <option value="1" data-year="2011">Mazda</option>
       <option value="2" data-year="2015">Honda</option>
       <option value="3" data-year="2008">Mercedes</option>
       <option value="4" data-year="2005">Toyota</option>
  </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

Hier ist das Arbeitsbeispiel: https://jsfiddle.net/ed5axgvk/1/

0
curiousBoy

Das ist was ich mir ausgedacht habe:

		$(document).ready(function(){
		
		$(".fc-event").each(function(){
		
			console.log(this.attributes['data'].nodeValue)	
		});
    
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='external-events'>
			<h4>Booking</h4>
			<div class='fc-event' data='00:30:00' >30 Mins</div>
			<div class='fc-event' data='00:45:00' >45 Mins</div>
</div>

0
gsam01