javascript - 切换单个元素的类

Question

super 菜鸟，我正在尝试创建一个 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 是被单击的元素:

$(".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>