Comment retourner les cartes en utilisant onClick?

Question

Actuellement mes cartes sont actuellement face cachée avec le code * ci-dessous. Comment pourrais-je les changer pour faire face à l'aide des fonctions onClick? Comment pourrais-je alors utiliser les identifiants pour les placer dans un tableau, puis utiliser les identifiants pour obtenir des images de mes images?

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

Débarrassez-vous de l'attribut onclick qui est inutilement répété 12 fois et fil d'un événement click à l'image par classe css en cinq lignes de jQuery:

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

Le code d'origine comporte quelques erreurs. Voir ce violon qui devrait vous donner un peu d'aide: http://jsfiddle.net/GarryPas/gam8tcx7/2/