Переключить класс для отдельного элемента

Question

Uber noob здесь, я пытаюсь создать игру памяти Javascript / DOM, проблема, с которой я сталкиваюсь - перевернуть одну карту против всех них

Полный код здесь https://codepen.io/anon/pen/PedeYq

$(".card").on("click", flipCard);

function flipCard(event) {
  cardFlip();
}
function cardFlip() {
    HERE.toggleClass('open show')
}

Однако я, кажется, пытаюсь переключить эту карту (см., Где она говорит ЗДЕСЬ), похоже, не работает ..

Answer 1

jQuery устанавливает this для целевого элемента в его обработчиках событий.Вы можете передать this на cardFlip.

$(".card").on("click", flipCard);

function flipCard(event) {
    cardFlip(this);
}
function cardFlip(HERE) {
    HERE.toggleClass('open show')
}

Answer 2

В jQuery элемент обработчика событий this - это элемент, по которому щелкают:

$(".card").on("click", cardFlip);

function cardFlip() {
  $(this).toggleClass('open show');
}

.card {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: black;
}

.open {
  background: blue;
}

.show {
  box-shadow: 0 0 0 2px gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card"></div>
<div class="card"></div>

Другой вариант - использовать event.target:

$(".card").on("click", cardFlip);

function cardFlip(event) {
  $(event.target).toggleClass('open show');
}

.card {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: black;
}

.open {
  background: blue;
}

.show {
  box-shadow: 0 0 0 2px gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card"></div>
<div class="card"></div>