jQuery – Data Attribute in variable speichern und auslesen
Verfasst am 22.09.2017
Update 24.04.2025
Data-Attribute sind ein netter Helfer, wenn es darum geht sich zu merken worauf der Besucher beispielsweise als letztes geklickt hat. Aber auch ein paar jQuery Spielereien lassen sich damit super erstellen.
Beispiel: Mit Data Attributen ein alert erstellen
- HTML
- JS
- CSS
HTML
<div class="boxen">
<div class="test" data-id="1">1</div>
<div class="test" data-id="2">2</div>
<div class="test" data-id="3">3</div>
</div>
JS
jQuery( 'div.test' ).on('click', function() {
var dataID = jQuery(this).attr('data-id');
alert(dataID);
});
CSS
div.boxen {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
padding: 20px;
}
div.test {
width: 30%;
height: 200px;
display: flex;
text-align: center;
background: #6c91bf;
align-items: center;
justify-content: center;
border-radius: 4px;
opacity: 0.6;
font-size: 50px;
color: rgba(255,255,255,.5);
cursor: pointer;
}
div.test:hover {
opacity: 1;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
font-size: 70px;
}
div.test+div.test {
background: #a14ebf;
}
div.test+div.test+div.test {
background: #af2bbf;
}
1
2
3
1. Erstelle ein Div
In meinem Beispiel nenne ich es einfach data-id und hänge es einem Div an:
html
<div class="test" data-id="1"></div>
Mehr anzeigen
2. Speicher die Attribute in eine Variable
Anschließend muss nur noch die data-id mittels jQuery in einem var gespeichert werden. Nun kann man damit arbeiten.
javascript
jQuery( 'div.test' ).on('click', function() {
var dataID = jQuery(this).attr('data-id');
alert(dataID);
});
Mehr anzeigen
Man kann aber auch die attribute überschreiben. Das geht auch ganz einfach mithilfe von attr.
Im folgenden Beispiel wird die data-id mit der ID 3 überschrieben.
javascript
jQuery('div.test').attr('data-id', '3');
Mehr anzeigen
3 Likes
1 Kommentar
Schreibe ein Kommentar zu jQuery – Data Attribute in variable speichern und auslesen
I am not rattling great with English but I get hold this really easygoing to read .