jQuery – Data Attribute in variable speichern und auslesen
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
1
2
3
jQuery( 'div.test' ).on('click', function() {
var dataID = jQuery(this).attr('data-id');
alert(dataID);
});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:
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.
jQuery( 'div.test' ).on('click', function() {
var dataID = jQuery(this).attr('data-id');
alert(dataID);
});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.
jQuery('div.test').attr('data-id', '3');
I am not rattling great with English but I get hold this really easygoing to read .