Как изменить класс на все дивы?
У меня есть игра на память. Я пытаюсь добавить кнопку, которая откроет все карты и снова их перевернет. все перевернутые карты - это перевернутый класс. Проблема возникает, когда одна из карточек уже перевернута или скрыта, а затем функция переворачивает ее, а не другие карточки.
Как я могу это исправить?
function revelCards() {
var revelCard = document.querySelectorAll('.card');
for (var i = 0; (i < revelCard.length) ; ++i) {
if (revelCard[i].classList.contains('flipped')){
revelCard[i].classList.remove('flipped');
} else {
revelCard[i].classList.add('flipped');
}
}
Что должен делать revelCards()? Должен ли он открывать все карты независимо от их текущего состояния?
По крайней мере, вам не хватает закрывающей фигурной скобки
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Проблема в том, что ваш цикл просто переворачивается в зависимости от текущего CSS. Однако один из них переворачивается вручную, поэтому цикл просто переключает CSS.
Чтобы исправить это, вы можете сохранить перевернутое значение в переменной. Перед тем, как перейти к циклу for, вы можете вручную переключить (сбросить) переменную.
В качестве альтернативы вы можете проигнорировать уже установленное значение. Это означает, что CSS больше не переключается.
В любом случае вам понадобится ссылка на оригинал, измененный вручную.
Вы можете сохранить тот, который перевернут вручную, в переменной, когда он перевернут (нет, точно, как вы это делаете), например: onClick(event){this.flipped = event.target }; , затем в цикле выше просто проверьте if (card!==this.flipped) \\do the class update
Вам следует просто удалить предложение if, например:
function revelCards() {
var revelCard = document.querySelectorAll('.card');
for (var i = 0; (i < revelCard.length) ; ++i) {
revelCard[i].classList.add('flipped');
}
}
Теперь перевернутые карты останутся перевернутыми, а все остальные перевернуты.
Если я правильно понял, у вас есть набор «карточек», содержимое которых вы хотите показать, а затем скрыть. Если я прав, вы можете попробовать сделать что-то вроде этого:
window.onload = ()=>{
let btn = document.getElementById('toggle');
btn.addEventListener('click', ()=>{
let cards = document.querySelectorAll('.card');
let flippedCards = [];
for(let i = 0; i < cards.length; i++){
// remember all the cards that are already flipped
if (cards[i].classList.contains('flipped')){
flippedCards.push(i);
}
// flip all the cards
cards[i].classList.add('flipped');
}
// flip all the cards again after 1 second (1000ms)
setTimeout(()=>{
for(let i = 0; i < cards.length; i++){
cards[i].classList.remove('flipped');
}
// return the cards to their original state
flippedCards.forEach(elem =>{
cards[elem].classList.add('flipped');
});
}, 1000);
});
};.container {
display: flex;
margin-bottom: 5px;
}
.card {
transition: background-color 0.3s ease-in-out;
background-color: red;
width: 50px;
height: 50px;
margin-left: 5px;
}
.flipped {
background-color: green;
}<div class = "container">
<div class = "card"></div>
<div class = "card"></div>
<div class = "card"></div>
<div class = "card flipped"></div>
<div class = "card"></div>
<div class = "card flipped"></div>
<div class = "card"></div>
<div class = "card"></div>
</div>
<input type = "button" value = "flip cards" id = "toggle">Также вот рабочий пример :)
без оператора if?