Question

Uber noob在这里，我正在尝试创建一个Javascript / DOM内存游戏，我遇到的问题是翻转1张卡而不是所有卡

完整代码在这里 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>

Answer 2

jQuery将this设置为其事件处理程序中的目标元素。您可以将this传递给cardFlip。

$(".card").on("click", flipCard);

function flipCard(event) {
    cardFlip(this);
}
function cardFlip(HERE) {
    HERE.toggleClass('open show')
}

切换单个元素的类

2 个答案: