20.03.2024, 14:01
Danke, jetzt ist das Ganze klar geworden.
Dieses Javascript müsste das tun, was Du dir vorstellst:
Anmerkungen:
Dieses Javascript müsste das tun, was Du dir vorstellst:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Q&A</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
.dataset.clicked {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="row parent">
<div class="col-lg-12 frage">Was bedeutet der Begriff Delay in der Fliegersprache?</div>
<div class="col-lg-4 dataset"><a href="#" class="box a1" id="data2"><span class="border rounded-circle letter"
id="q1">W</span> Verspätung</a></div>
<div class="col-lg-4 dataset"><a href="#" class="box a1" id="data2"><span class="border rounded-circle letter"
id="q2">D</span> Flughafen</a></div>
<div class="col-lg-4 dataset"><a href="#" class="box a1" id="data2"><span class="border rounded-circle letter"
id="q3">S</span> Fallschirm</a></div>
</div>
<script>
// Eventlistener für Klick irgend wo auf der Seite registrieren:
window.addEventListener('click', event => {
// Elternelement mi der Klasse "parent"
// und Element mit der Antwort ermitteln:
const
parent = event.target.closest('.parent'),
answer = event.target.closest('.dataset');
//Existiert beides? In dem Fall wurde eine Antwort geklickt.
if (parent && answer) {
// Ggf. bei einer Antwort, die zuvor geklickt wurde,
// die Klasse "clicked" löschen:
const
lastClicked = parent.querySelector('.dataset.clicked');
if (lastClicked) lastClicked.classList.remove('clicked');
// Bei der jetzt geklickten Antwort die Klasse "clicked"
// hinzu fügen:
answer.classList.add('clicked');
}
});
</script>
</body>
</html>- Eine ID muss dokumentweit eindeutig sein, die ID "data2" wird jedoch mehrfach zugewiesen. Möglicher Weise gilt das auch für "q1", "q2" und "q3" wenn sie in den nächsten Zeilen ebenfalls zugewiesen werden.
- <a href="#" wird zwar häufig so verwendet und funktioniert, macht aber keinen Sinn, weil es sich nicht um einen Link handelt.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)