javascript - 如何使用 onClick 翻转卡片？

Question

目前我的卡片正面朝下，代码*如下。 我将如何使用 onClick 函数将它们更改为正面？然后我将如何使用 id 放置在数组中，然后使用 id 从我的图像中获取图像？

HTML

<table style="width:100%">
  <tr>
    <td><img src="cards_gif/b.gif" Class="back" id="0" onClick="flipCard()"></td>
    <td><img src="cards_gif/b.gif" Class="back" id="1" onClick="flipCard()"></td>
    <td><img src="cards_gif/b.gif" Class="back" id="2" onClick="flipCard()"></td>
  </tr>
  <tr>
   <td><img src="cards_gif/b.gif" Class="back" id="3" onClick="flipCard()"></td>
   <td><img src="cards_gif/b.gif" Class="back" id="4" onClick="flipCard()"></td>
   <td><img src="cards_gif/b.gif" Class="back" id="5" onClick="flipCard()"></td>
  </tr>
  <tr>
  <td><img src="cards_gif/b.gif" Class="back" id="6" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="7" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="8" onClick="flipCard()"></td>
  </tr>
  <tr>
  <td><img src="cards_gif/b.gif" Class="back" id="9" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="10" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="11" onClick="flipCard()"></td>
  </tr>
</table>

CSS

<style>
* {
    background-color: lightblue;
    border-color: hsla(173,100%,50%,1.00);
    font-weight: bold;  
}

.back {
    width:100px;
    height:100px;
}
</style>

JS

function flipCard(theElementID){
    /*var cardID = ["c1","c2","c3"];""3","4","5","6","7","8","9","10","11","12"]; *//ignore
    var theElement.src = document.getElementById(theElementID);
    theElement.src ="c1.gif";
    document.getElementById(c1.gif")
} // don't really understand this function. I also tried using an array to pick the card image if that makes sense.

Answer 1

去除不必要重复 12 次的 onclick 属性，并在 5 行 jQuery 中通过 css 类将点击事件连接到图像:

$(function() {
    $('.back').on('click', function() {
        flipCard(this.id); //Pass the img id to flipCard
    }); 
});

原始代码有一些错误。看到这个 fiddle 应该会给你一些帮助:http://jsfiddle.net/GarryPas/gam8tcx7/2/