Comment pouvez-vous remplacer ces attributs onclick = "..." avec un code de style jQuery plus propre?

Question

J'ai un code un peu comme ça ...

<img src="..." width="100" height="100" alt="" onclick="FlipImg(1234)" /> 

Il y a beaucoup de ces images sur la page, chacune avec un autre identifiant dans l'appel FlipImg().

Normalement, je préfère mettre ce type de code dans un peu de jQuery, peut-être un peu comme ça ...

$("img").click(FlipImg(<id from somewhere?>)); 

Cependant, je ne peux pas savoir où stocker l'ID que j'ai besoin passer au code (le titre est déjà utilisé pour contenir, bien, le titre de l'image, et id est déjà utilisé pour autre chose). Quelqu'un peut-il suggérer un moyen d'obtenir mon code onclick du HTML et dans mon fichier javascript où il appartient?

Answer 1

$("img").click(function() { 
    FlipImg($(this).attr('class')); 
}); 

Vous pouvez le faire de cette façon et stocker l'ID dans l'étiquette d'identification de l'image. Pour être valide en HTML, les identifiants ne peuvent pas commencer par un nombre, alors ajoutez-y quelque chose.

EDIT: J'ai manqué une partie de la question

<img src="..." width="100" height="100" alt="" class="img1234" /> 

Effectuez ensuite:

$("img").click(function() { 
    FlipImg($(this).attr('class').substring(3)); 
}); 

Answer 2

tout ce que je compris la question ur ma solution est

html

<img src="..." width="100" height="100" id="1234" /> 

javascript

jQuery('img').bind('click',function(e){ 
     FlipImg(jQuery(e.target).attr('id')); 
     }); 

Answer 3

essai:

< img src = "..." width = "100" height = "100" alt = "" onclick = "FlipImg (1234) "rel =" 1234"/>

et jQuery:

$. ("img") cliquez sur (function() { FlipImg ($ (this) .attr ("rel")); });

il devrait fonctionner

Answer 4

Comme avec les autres réponses ici, je recommande le recyclage d'un autre attribut dans votre document et en utilisant jQuery pour extraire la valeur. Lequel vous pouvez utiliser dépend de la page doctype et à quel point vous voulez suivre les spécifications de ce doctype. Si vous ne vous souciez pas du doctype, alors l'une des réponses que j'ai vues à cette question fonctionnera.Si vous faites attention, vos choix sont assez rares:

1. Vous pouvez ajouter une classe à l'image: <img src="..." class="flip1234" />
2. Vous pouvez ajouter un titre à cette image: <img src="..." title="Image 1234" alt="Alt text" />
3. Vous pouvez ajouter un hachage à la URL de l'image: <img src="myimage.png#1234 />
4. vous pouvez envelopper l'image dans une ancre mais plus tard tuer le clic: <a href="myimagescript.php?id=1234"><img .../></a>

Option 4 est seulement une option si vous avez une page valide pour gérer ce genre de la demande. Il est préférable à toutes ces solutions, car il permet toujours aux utilisateurs avec JS de voir votre contenu. Et quelques personnes s'irritent vraiment à l'option 1 parce qu'elles pensent que cela pollue la présentation avec le comportement. Je peux totalement voir leur point de vue, mais c'est mon choix personnel. L'ajout d'un tag personnalisé est définitivement une option, mais vous devez produire votre propre DTD si vous vous souciez réellement de la validation.

Answer 5

Je suppose que votre requête concerne le déplacement du code HTML. Vous pouvez ajouter un attribut, comme suggéré par Alin. Et puis, dans js, parcourez toutes les balises img pour savoir si cet attribut existe sur la balise et ensuite seulement lier l'onclick. J'apprends jquery pour le moment, donc je n'écrirai pas le code. Si quelqu'un peut le mettre ici, s'il vous plaît faire.