切換單個元素的類

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