JQuery Проблема с переворотом карты

Question

Столкновение со следующими проблемами:

• При нажатии кнопки «A» анимация работает так, как задумано (т.е. карта переворачивается с «красного» на «синее»). Повторное нажатие «A» вернет карту в исходное состояние. Это ожидаемый результат.

• Проблема первая: начните последовательность (например, «A»), когда карта изменится с «красной» на «синюю». Нажмите другую кнопку (например, «B»), карта изменится на «Желтую». В этом случае карту следует перевернуть и вернуть в исходное состояние. Эту проблему можно наблюдать, если вы начинаете с «B».

• Проблема вторая: дважды нажмите кнопку «B». Последовательность карточек должна быть «Красный => Желтый => Красный», а не «Красный => Желтый => Синий => Красный».

Кнопки должны рассматриваться как два отдельных объекта. .

$('#flipA').on('click', function myFunctionA() {
  $('#card').removeClass('flippedB');
  $('#card').toggleClass('flippedA');
})

$('#flipB').on('click', function myFunctionB() {
  $('#card').removeClass('flippedA');
  $('#card').toggleClass('flippedB');
})

.container {
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

#card .front {
  background: red;
}

#card .back {
  background: blue;
  transform: rotateY(180deg);
}

#card.flippedA .back {
  background: blue;
  transform: rotateY(180deg);
}

#card.flippedB .back{
  background: yellow;
  transform: rotateY(180deg);
}

#card.flippedA {
  background: blue;
  transform: rotateY(180deg);
}

#card.flippedB {
  background: yellow;
  transform: rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container">
  <div id="card">
    <figure class="front">Frontside</figure>
    <figure class="back">Backside</figure>
  </div>
</section>

<section id="options">
  <p><button id="flipA">A</button></p>
  <p><button id="flipB">B</button></p>
</section>

Благодарю за помощь и совет по этому поводу.

Answer 1

Небольшая отладка имеет большое значение.
Если вы сначала нажмете A, а затем B, вы увидите, что вы неправильно удалили класс на B flip (и наоборот, очевидно , если ваша последовательность была B -> A)

$('#flipA').on('click', function myFunctionA() {
  $('#card').toggleClass('flippedA');
  console.log($('#card').attr('class'))
})

$('#flipB').on('click', function myFunctionB() {
  $('#card').toggleClass('flippedB');
  console.log($('#card').attr('class'))
})

.container {
  width: 200px;
  height: 150px;
  position: relative;
  perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.flex {
 display: flex;
 justify-content: space-evenly;
}

#options {
 width: 200px;
}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

#card .front {
  background: red;
}

#card .back {
  transform: rotateY(180deg);
}

#card.flippedA {
  background: blue;
  transform: rotateY(180deg);
}

#card.flippedB {
  background: yellow;
  transform: rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="flex">
  <section class="container">
    <div id="card">
      <figure class="front">Frontside</figure>
      <figure class="back">Backside</figure>
    </div>
  </section>

  <section id="options" class="flex">
    <p><button id="flipA">A</button></p>
    <p><button id="flipB">B</button></p>
  </section>
</div>

Согласно jQuery документы на toggleClass вам также необходимо передать исходный className, чтобы удалить исходный класс, наряду с добавлением нового, проблема в том, что вам нужно определить, какой.

Проще говоря, вы переключаете первый класс, затем второй, но вы не очищаете, в результате обе карты переключаются.

Эти два следующих варианта быстро приходят на ум:

1. Либо создание значения по умолчанию non-fliped class
2. Вместо использования переключателя, добавляющего и удаляющего классы явно.

Для простоты ответа я go выберу второй вариант. Итак, ваш JS должен выглядеть примерно так:

$('#flipA').on('click', function myFunctionA() {
  $('#card').removeClass('flippedB');
  $('#card').toggleClass('flippedA');
})

$('#flipB').on('click', function myFunctionB() {
  $('#card').removeClass('flippedA');
  $('#card').toggleClass('flippedB');
})

Что касается того, почему ваша карта желтеет, сначала я подумал, что происходит какой-то странный обман наложения RGB, но оказалось, что это просто эта строка

 #card.flippedB {
    background: yellow;
 }

---

Сноска : Это личное предпочтение кодирования, но я считаю его хорошей практикой для функций обратного вызова в обработчиках (таких как on или даже vanilla JS addEventListener), что необязательно объявлять имена функций, вы можете просто использовать так называемую анонимную функцию .

Единственное исключение из этого существа, если вы собираетесь использовать это функция явно в обратном вызове - обратный вызов в обратном вызове

Таким образом, это может быть либо - function () {, или, что еще лучше, синтаксис стрелки ES6 - () => {

Это также предотвращает pre -компилятор в движке, чтобы без надобности поднимать объявление функции в верхнюю часть области видимости.