Jquery Устранение неисправностей флип-карты - PullRequest
Новая
       20

Jquery Устранение неисправностей флип-карты

0 голосов
/ 27 марта 2020

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

Любой совет, чтобы сделать jQuery более глобальным и иметь возможность щелкать / переворачивать каждую карту, был бы очень признателен.

Вот пример, который я использовал: https://codepen.io/marcwilk/pen/JjdwKZR

HTML: 

<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip.</p>

CSS: 

body { font-family: sans-serif; }

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: red;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg);
}

JS: 

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});

Спасибо!

1 Ответ

1 голос
/ 27 марта 2020

Во-первых, ваш код чистый JavaScript и не использует jQuery.

Во-вторых, проблема в том, что вы используете document.querySelector('.card'), который выбирает первый элемент .card.

Ваше решение заключается в использовании document.querySelectorAll('.card'); и l oop через него для добавления прослушивателя событий щелчка: 

var cards = document.querySelectorAll('.card');
cards.forEach(card => {
  card.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  })
})
body {
  font-family: sans-serif;
}

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: red;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg);
}
<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip.</p>
...