Как удалить класс в JavaScript и сохранить те, которые я удалил

Question

Как удалить класс в JavaScript и сохранить те, которые я удалил

1

Итак, я сделал игру на память с html, css и javascript.

Я сделал кнопку, которая переключает карты, означает, что все карты, которые имеют

('flipped') класс удалит или добавит туда класс. это выглядит так:

function toggle (){
var divs = document.querySelectorAll('.card');

for (var i = 0; 0 < divs.length; i++){ 

if (divs[i].classList.contains('flipped')){

divs[i].classList.remove('flipped'); 

}else{

divs[i].classList.add('flipped'); } 
} 
 }

Я хочу сделать карту, которая уже перевернулась, чтобы не быть затронутой кнопкой Toggle.

Есть мысли?

Daniel Shokri 04 фев. 2019, в 20:57

Источник

Теги:

javascript

css

3 ответа

Ещё вопросы

Gaurav Saraswat · Answer 1 · 2019-02-04T17-43-00.000Z

Я думаю, что вы ищете :not() selector.

var nonFlippedCards = document.querySelectorAll('.card:not(.flipped)');

for (var i = 0; 0 < nonFlippedCards.length; i++){ 
  divs[i].classList.add('flipped'); } 
}

Теперь сохраните это.

T. Jefferds · Answer 2 · 2019-02-04T18-11-00.000Z

Трудно понять, что вы хотите, чтобы кнопка делала, но если вы хотите перевернуть перевернутые карты лицевой стороной вниз, вам не нужно выражение else. Вам нужно добавить перевернутый класс к карточкам, когда вы нажимаете на них или каким-либо другим способом, который вы намереваетесь сделать, а затем использовать эту кнопку, чтобы перевернуть их все лицевой стороной вниз. Объясните немного больше о назначении кнопки, пожалуйста.

То, что я пытаюсь сделать, это уже перевернутая карта (которая была раскрыта), чтобы не быть затронутой кнопкой переключения, я сделал небольшое видео, чтобы объяснить себя намного лучше nimb.ws/gSVCZT

ADuBois · Answer 3 · 2019-02-04T17-57-00.000Z

Метод classList.add() не добавит класс "перевернутый", если этот элемент уже содержит этот класс, поэтому я предполагаю, что вы хотите отслеживать карты, перевернутые в прошлом? (Я не мог видеть ваше видео). Для этого вы можете использовать асинхронный массив, выходящий за пределы функции, чтобы отслеживать, перевернулась карта или нет. Просто создайте пустой массив и затем используйте цикл for для установки значений в массиве на 1 при каждом переключении карты, а затем проверьте, существует ли это значение в массиве, перед добавлением класса "перевернутый", например так...

var dArr = [];

function toggle (){
  var divs = document.querySelectorAll('.card');
  for (var i = 0; i < divs.length; i++){ 
    if (divs[i].classList.contains('flipped')){
    divs[i].classList.remove('flipped'); 
    dArr[i] = 1;
  } else if (!dArr[i]){ 
    divs[i].classList.add('flipped'); } 
  } 
}

Примечание: в вашем коде произошла простая ошибка, вы 0 < divs.length, чтобы включить i < divs.length чтобы предотвратить бесконечный цикл for. :)

Если вы хотите сделать свой код немного быстрее, вы также можете получить div '.card' всякий раз, когда страница загружается один раз, так что это не нужно делать каждый раз, когда запускается функция toggle(). Это должно работать, если вы не планируете добавлять больше карт по ходу игры. Я бы также обернул значения в объект, чтобы избежать использования глобальных переменных, которые предотвратят будущие конфликты. И, наконец, я бы не стал вызывать вашу функцию toggle(), потому что она обычно используется в библиотеках JavaScript и JavaScript. В любом случае, вот моя версия, если вам интересно, функция init захватывает все div '.card', вставляет их в массив элементов в объекте dVars, и в переменной dArr также сохраняется тот же объект, чтобы предотвратить использование глобальных переменных.,

var dVars = {
  dArr: [],
  divs: undefined
}


function flip (){
  for (i = 0; i < dVars.divs.length; i++){
    console.log(i);
    if (dVars.divs[i].classList.contains('flipped')){
        dVars.divs[i].classList.remove('flipped');
        dVars.dArr[i] = 1;
    } else if (!dVars.dArr[i]){
      dVars.divs[i].classList.add('flipped');
      console.log(i);
    }
  }
}

function init() {
  dVars.divs = document.querySelectorAll('.card');
}

window.onload = init;

Вы также можете сделать это без асинхронного массива, добавив класс 'hasFlipped' к каждому <div> вместе с классом 'flipped', а затем проверив, есть ли у <div> этот класс, прежде чем снова добавить класс 'flipped':

var dVars = {
  divs: undefined
}


function flip (){
  for (i = 0; i < dVars.divs.length; i++){
    if (dVars.divs[i].classList.contains('flipped')){
        dVars.divs[i].classList.remove('flipped');
    } else if (!dVars.divs[i].classList.contains('hasFlipped')){
      dVars.divs[i].classList.add('flipped', 'hasFlipped');
    }
  }
}

function init() {
  dVars.divs = document.querySelectorAll('.card');
}

window.onload = init;

Надеюсь это поможет!