Проблема с условиями в javascript при работе с DOM
Это условие не работает. Когда я нажимаю, он должен скрывать все элементы li, и когда я снова нажимаю, он должен отображать все элементы li, которые скрыты, но не работают
hide.addEventListener("click", function() {
Array.from(list.children).forEach(function(k){
if (k.style.display === "block") {
k.style.display = "none";
hide.textContent = "Show";
list.style.backgroundColor = "rgba(0, 0, 0, 33%)";
list.style.borderRadius = "8px";
document.querySelector(".hidden").style.display = "block";
input.setAttribute("disabled", "disabled");
}
else if (k.style.display === "none") {
hide.textContent = "Hide";
k.style.display = "block";
list.style.backgroundColor == "transparent";
list.style.borderRadius = "";
document.querySelector(".hidden").style.display = "none";
input.removeAttribute("disabled");
}
else {
};
})
});
переключить класс было бы намного проще ....
На самом деле, ваши условия if очень тонко работают с нет. Присвоение - это не проверка на равенство.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Array.from(list.children).forEach(function(k){
if (k.style.display == "block") {
k.style.display = "none";
hide.textContent = "Show";
list.style.backgroundColor = "rgba(0, 0, 0, 33%)";
list.style.borderRadius = "8px";
document.querySelector(".hidden").style.display = "block";
input.setAttribute("disabled", "disabled");
}
else if (k.style.display == "none") {
hide.textContent = "Hide";
k.style.display = "block";
list.style.backgroundColor == "transparent";
list.style.borderRadius = "";
document.querySelector(".hidden").style.display = "none";
input.removeAttribute("disabled");
}
else {
};
});
Когда вы пытаетесь сравнить два значения, не забудьте использовать == или === вместо =. Когда вы используете =, это означает, что ваш ОБЪЯВЛЕНИЕ является значением чего-то, тогда как когда вы используете == или ===, это означает, что ваш СРАВНЕНИЕ имеет два значения чего-то. Используйте === только тогда, когда вы хотите быть по-настоящему точными, например, 1 == '1' будет истинным, тогда как 1 === '1' будет ложным, поскольку один является целым числом, а другой - строкой, поэтому они не совсем совпадают.
Также приятным в JQuery является то, что вы можете использовать множество встроенных функций для определенных вещей переключать, в этом случае вы можете использовать .toggleClass () и иметь тот же эффект:
Array.from(list.children).forEach(function(k){
k.toggleClass('hidden');
});
И тогда в вашем CSS вы могли бы иметь:
.hidden {
display = 'block';
}
Помните,
=! ====