切换单个元素的类

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') }