web-dev-qa-db-fra.com

Exécuter la fonction jQuery onclick

j'ai donc implémenté un peu de jQuery qui bascule le contenu via un curseur activé par une balise <a>. Maintenant, j'y pense plutôt si la DIV maintient le lien comme étant le lien lui-même.

le jQuery que j'utilise est assis dans ma tête ressemble à ceci:

<script type="text/javascript">
function slideonlyone(thechosenone) {
 $('.systems_detail').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).slideDown(200);
      }
      else {
           $(this).slideUp(600);
      }
 });
}
</script>

j'utilisais cela comme une boîte de type d'index, de sorte qu'il y a plusieurs produits lorsque vous cliquez sur la balise <a> qui était auparavant une image *, un rendu du contenu situé en dessous serait décrit, décrivant les détails du produit:

<div class="system_box">
  <h2>BEE Scorecard database</h2>
  <p>________________</p>
  <a href="javascript:slideonlyone('sms_box');"></a>
</div>

les détails des produits sont emballés dans cette div.

<div class="systems_detail" id="sms_box">
</div>

ainsi, lorsque vous cliquez sur ce qui était auparavant une image *, la fonction slideonlyone ('div_id_name') était exécutée. la fonction ci-dessus ferme ensuite toutes les autres div avec le nom de classe 'system details' puis ouvre/glisse le div avec l'identifiant qui a été transmis à la fonction slideonlylyone. De cette façon, vous pouvez basculer les détails des produits sans les afficher tous en même temps.

remarque je n'ai gardé que la balise <a> pour vous montrer ce qu'il y avait dedans, je vais m'en débarrasser.

note: j'ai eu l'idée d'envelopper tout le div dans une balise <a> mais est-ce une bonne pratique?

Alors maintenant, ce que je me demande, c’est que vous avez besoin de JavaScript pour exécuter onclick sur une balise div. Comment l’écrivez-vous pour qu’elle continue à exécuter ma fonction slideonlyone?

javascripthtmlonclickjquery
7
TheLegend

En utilisant obtrusive JavaScript (code inline) comme dans votre exemple, vous pouvez attacher le gestionnaire d’événements click à l’élément div avec l’attribut onclick comme suit:

 <div id="some-id" class="some-class" onclick="slideonlyone('sms_box');">
     ...
 </div>

Cependant, la meilleure pratique consiste à utiliser JavaScript discret, ce que vous pouvez facilement réaliser à l'aide de la méthode on() de jQuery ou de son raccourci click(). Par exemple:

 $(document).ready( function() {
     $('.some-class').on('click', slideonlyone('sms_box'));
     // OR //
     $('.some-class').click(slideonlyone('sms_box'));
 });

Dans votre fonction de gestionnaire (par exemple, slideonlyone() dans ce cas), vous pouvez référencer l'élément qui déclenché l'événement (par exemple, la div dans ce cas) avec l'objet $(this). Par exemple, si vous avez besoin de son identifiant, vous pouvez y accéder avec $(this).attr('id').

MODIFIER

Après avoir lu votre commentaire à @fmsf ci-dessous, je constate que vous devez également référencer de manière dynamique l'élément cible à basculer. Comme @fmsf le suggère, vous pouvez ajouter cette information à la variable div avec un attribut data comme suit:

<div id="some-id" class="some-class" data-target="sms_box">
    ...
</div>

Pour accéder à l'attribut data de l'élément, vous pouvez utiliser la méthode attr() comme dans l'exemple de @ fmsf, mais la meilleure pratique consiste à utiliser la méthode data() de jQuery comme suit:

 function slideonlyone() {
     var trigger_id = $(this).attr('id'); // This would be 'some-id' in our example
     var target_id  = $(this).data('target'); // This would be 'sms_box'
     ...
 }

Notez comment accéder à data-target avec data('target'), sans le préfixe data-. À l'aide d'attributs de données, vous pouvez attacher toutes sortes d'informations à un élément et jQuery les ajoutera automatiquement à l'élément data de l'élément .

18
Boaz

Pourquoi avez-vous besoin de l'attacher au HTML? Il suffit de lier la fonction avec le survol

$("div.system_box").hover(function(){ mousin }, 
                          function() { mouseout });

Si vous insistez pour avoir des références JS dans le code HTML, ce qui est généralement une mauvaise idée, vous pouvez utiliser:

onmouseover="yourJavaScriptCode()"

après modification du sujet:

<div class="system_box" data-target="sms_box">

...

$("div.system_box").click(function(){ slideonlyone($(this).attr("data-target")); });
6
fmsf

Vous pouvez lier les événements mouseenter et mouseleave et jQuery imitera ceux où ils ne sont pas natifs. 

$("div.system_box").on('mouseenter', function(){
    //enter
})
.on('mouseleave', function(){
    //leave
});

violon

note: n'utilisez pas le survol, car il est obsolète

0
gillyspy

Il y a plusieurs choses que vous pouvez améliorer ici. Pour commencer, il n’ya aucune raison d’utiliser une balise <a> (ancre) puisque vous n’avez pas de lien.

Chaque élément peut être lié au survol d’événements ... divs, span, labels, entrées, etc.

Je ne peux pas vraiment identifier ce que vous essayez de faire, cependant. Vous mélangez l'objectif avec votre propre implémentation et, d'après ce que j'ai vu jusqu'à présent, vous ne savez pas vraiment comment le faire. Pourriez-vous mieux illustrer ce que vous essayez d'accomplir?

== EDIT ==

Les exigences sont encore très vagues. J'ai implémenté une version très rapide de ce que j'imagine que vous dites ... ou de quelque chose de proche qui illustre comment vous pourriez le faire. M'a laissé savoir si je suis sur la bonne voie.

http://jsfiddle.net/THEtheChad/j9Ump/

0
THEtheChad