jQuery: .toggle() ne fonctionne pas correctement sur deux éléments différents

Question

Ceci est mon balisage:

<table class="col1table" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td><a class="tips_trigger" href="#"><img src="/img/design/icon_tips_venn.png" /></a></td> 
     <td><a class="facebook_trigger" href="#"><img src="/img/design/icon_facebook.png" /></a></td> 
     <td><a class="twitter_trigger" href="#"><img src="/img/design/icon_twitter.png" /></a></td> 
     <td><a class="myspace_trigger" href="#"><img src="/img/design/icon_myspace.png" /></a></td> 
    </tr> 
    <tr> 
     <td><a class="tips_trigger" href="#">TIPS EN VENN</a></td> 
     <td><a class="facebook_trigger" href="#">FACEBOOK</a></td> 
     <td><a class="twitter_trigger" href="#">TWITTER</a></td> 
     <td><a class="myspace_trigger" href="#">MYSPACE</a></td> 
    </tr> 
</table> 

Ceci est le balisage pour une infobulle:

<div id="message_tips" class="toolTip">Lorem ipsum dolor sit amet.<br /><br /><br /><br /><br /><br />Lorem ipsum dolor sit amet.</div> 

Ceci est mon code pour masquer/afficher l'info-bulle pour .tips_trigger (l'info-bulle a l'ID: "# message_tips"). Notez qu'il y a un .tips_trigger sur chaque ligne de la table. Et il y aura une info-bulle par "..._ trigger-class".

$('.tips_trigger').toggle(function(event){ 
    event.preventDefault(); 
    $('#message_tips').css('display', 'block'); 
    }, function(event){ 
    $('#message_tips').css('display', 'none'); 
}); 

J'ai deux problèmes:
1. Chacune des classes de tips_trigger-semble fonctionner le script independatly. Ce que je veux dire par là, c'est que si je clique sur tips_trigger dans la première ligne, il affiche l'info-bulle. Si je clique tout de suite sur tips_trigger dans la deuxième ligne, l'info-bulle s'affiche à nouveau. Je dois cliquer deux fois exactement sur la même astuce tips_trigger-class pour le cacher. Comment puis-je surmonter ce problème?
2. Chacune des classes "..._ trigger" aura une info-bulle, et pas seulement ".tips_trigger". Existe-t-il un moyen de modifier mon script actuel afin qu'il fonctionne pour plusieurs afficher/cacher au lieu d'écrire un script par classe?

Cordialement,
Marius

Answer 1

J'utilise l'entrée de: Charlie Brown, Mukund et bcherry faire ceci:

Markup déclenche:

<td><a class="tooltrigger" href="#tip1"><img src="/img/design/icon_tips_venn.png" /></a></td> 
<td><a class="tooltrigger" href="#tip2"><img src="/img/design/icon_facebook.png" /></a></td> 

infobulles de balisage:

<div id="tip1" class="tooltip">Lorem Ipsum Donor ist.<br /><br /><br /><br /><br /><br />Lorem Ipsum Donor ist.</div> 
<div id="tip2" class="tooltip">Facebook Lorem Ipsum Donor ist.<br /><br /><br /><br /><br /><br />Facebook Lorem Ipsum Donor ist.</div> 

Script:

$('.tooltrigger').click(function(event){ 
    event.preventDefault(); 
    $(
      '.tooltip' + $(this).attr('href') 
    ).toggle().siblings().hide(); 
}); 

Le script est teste d et fonctionne bien, mais d'autres suggestions sont appréciées.

Answer 2

Ce n'est pas tout à fait clair ce que vous voulez, mais voici un exemple modifié que (je pense) fixe vos deux problèmes: http://www.jsfiddle.net/fSrLz/

Vous ne devriez pas utiliser la fonction .toggle() pour vos gestionnaires de clic, vous devriez plutôt l'utiliser pour la fonctionnalité show/hide. Pour appliquer à tous, vous pouvez soit faire $(".tips_trigger, .facebook_trigger, etc...'), ou vous pouvez utiliser un sélecteur amateur comme $("[class$=_trigger") (ce qui signifie sélectionner tout dont l'attribut de classe se termine par "_trigger").

Voici le JS de cet exemple, je modified:

$('[class$=_trigger]').click(function (event) { 
    event.preventDefault(); 
    $('#message_tips').toggle(); 
}); 

Answer 3

$('a.tips_trigger').click(function(event){ 
    event.preventDefault(); 
    if ($('#message_tips').css('display') == 'block'){ 
     $('#message_tips').hide(); 
    } 
    else { 
     $('#message_tips').show(); 
    } 
}); 

Answer 4

Une solution élégante pour gérer plusieurs infobulles serait quelque chose comme ceci:

1. Modifier infobulle déclenche quelque chose comme :
   <li><a href="#tooltip_type2" class="tooltip-trigger">Type 1 triggger</a></li>
<li><a href="#tooltip_type2" class="tooltip-trigger">Type 2 trigger</a></li>

2. Modifier votre infobulles à quelque chose comme:

<div id="tooltip_type1" class="tooltip_content">Content for type 1</div>
<div id="tooltip_type1" class="tooltip_content">Content for type 2</div>

3. Modifier votre javascript:
   $(".tooltip_trigger").click(function() {
var target = $(this).attr('href');
var tooltip_state = 0;
if(tooltip_state) { $(".tooltip_content").css("display", "none"); }
$(target).css("display", "block");
tooltip_state = 1; return false; });

C'est l'essence que je ne dérange pas avec n'importe quelle syntaxe ou d'autres erreurs que j'ai pu faire. Cela résout à la fois vos problèmes.

Answer 5

J'ai eu un problème similaire. Je voulais appeler slideDown() sur un div lorsque l'un des deux éléments différents était cliqué. Ce que j'ai fait était de faire la fonction slideDown() sur l'un des éléments, puis de déclencher un événement click sur le premier élément lorsque vous cliquez sur le second élément.

quelque chose comme ceci:

$('#gallery_toggle').toggle(function() { 
    $('#gallery_slide').slideDown(); 
}, function() { 
    $('#gallery_slide').slideUp(); 
}); 

$('#another_gallery_toggle').click(function(){ 
    $('#gallery_toggle').trigger('click'); 
}); 

Hope that helps!