Wie wähle ich eine Liste der Namen aus und steuert die Anzeige eines DIV?
Posted: 18 May 2025, 21:35
Ich habe eine Liste von Namen (UL, Li -Elementen) und eine versteckte DIV oben
Wenn ein Name angeklickt wird (ausgewählt), sollte sich die Hintergrundfarbe des Namens ändern und der Div auf dem oberen Anzeigeblock. Nur wenn alle Namen abgewählt werden, zeigt das Div keine an.
Wenn ein Name angeklickt wird (ausgewählt), sollte sich die Hintergrundfarbe des Namens ändern und der Div auf dem oberen Anzeigeblock. Nur wenn alle Namen abgewählt werden, zeigt das Div keine an.
Code: Select all
const usersListItems = document.querySelectorAll(".users__list-item");
const myDiv = document.querySelector(".mydiv");
usersListItems.forEach((usersListItem) => {
usersListItem.addEventListener("click", () => {
usersListItem.classList.toggle("selected");
if (usersListItem.classList.contains("selected")) {
myDiv.classList.remove("hide");
} else {
myDiv.classList.add("hide");
}
});
});< /code>
.mydiv {
width: 100%;
height: 50px;
border: 1px solid;
}
.hide {
display: none;
}
.users__list-item,
.no-users {
list-style: none;
padding: 0.5em;
background: #ddd;
margin: 0.5em;
}
.selected {
background: dodgerblue;
color: white;
}< /code>
List Selection
[list]
[*]No users
[*]User 1
[*]User 2
[*]User 3
[*]User 4
[*]User 5
[*]User 6
[*]User 7
[/list]