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.

  • 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

In meinem Beispiel nenne ich es einfach data-id und hänge es einem Div an:

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

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.