Jquery Flip Card Устранение неполадок

Я пытаюсь создать несколько флип-карт с помощью 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');
});

Спасибо!


javascript html css addeventlistener
person Marc    schedule 27.03.2020    source источник
comment
Я новичок в jQuery - есть ли предпочтительный способ выбрать каждый экземпляр «.card»?   -  person Marc    schedule 27.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, ваш код — это чистый JavaScript, а не jQuery.

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

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

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>

person Anurag Srivastava    schedule 27.03.2020
comment
Большое спасибо! - person Marc; 27.03.2020