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

oliver

1 Kommentar

Schreibe ein Kommentar zu jQuery – Data Attribute in variable speichern und auslesen

  1. avatar pubg minimap hackpubg minimap hack sagt:

    I am not rattling great with English but I get hold this really easygoing to read .

Hinterlasse ein Kommentar zum Beitrag "jQuery – Data Attribute in variable speichern und auslesen"

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

Follow Me

doch mal auf Instagram