Comment appliquer un script bulle jquery à des données remplies dynamiquement?

Question

J'ai trouvé ce grand script de bulle jquery en ligne - http://jqueryfordesigners.com/coda-popup-bubbles/ - et je veux appliquer le même script à plusieurs éléments. La seule chose est que le script jquery ne s'applique qu'à un seul objet.

Voici le script:

$(function() { 
    $('.bubbleInfo').each(function() { 
     var distance = 10; 
     var time = 250; 
     var hideDelay = 500; 

     var hideDelayTimer = null; 

     var beingShown = false; 
     var shown = false; 
     var trigger = $('.trigger', this); 
     var info = $('.popup', this).css('opacity', 0); 


     $([trigger.get(0), info.get(0)]).mouseover(function() { 
      if (hideDelayTimer) clearTimeout(hideDelayTimer); 
      if (beingShown || shown) { 
       // don't trigger the animation again 
       return; 
      } else { 
       // reset position of info box 
       beingShown = true; 

       info.css({ 
        top: 20, 
        left: 10, 
        display: 'block' 
       }).animate({ 
        top: '-=' + distance + 'px', 
        opacity: 1 
       }, time, 'swing', function() { 
        beingShown = false; 
        shown = true; 
       }); 
      } 

      return false; 
     }).mouseout(function() { 
      if (hideDelayTimer) clearTimeout(hideDelayTimer); 
      hideDelayTimer = setTimeout(function() { 
       hideDelayTimer = null; 
       info.animate({ 
        top: '-=' + distance + 'px', 
        opacity: 0 
       }, time, 'swing', function() { 
        shown = false; 
        info.css('display', 'none'); 
       }); 

      }, hideDelay); 

      return false; 
     }); 
    }); 
}); 

Voici le code HTML:

<div class="bubbleInfo"> 
    <div> 
     <img src="coda-bubble_files/nav-download.png" class="trigger"> 
    </div> 
    <div class="popup">Content goes here</div> 
</div> 

Ce que je voudrais faire est, remplir dynamiquement une liste d'articles avec des classes comme "Tigger1", " trigger2 "," trigger3 ", etc. Aussi" popup1 "," popup2 ", etc. pour utiliser le script pour plusieurs éléments mais je ne sais pas comment modifier ou modifier le script.

Quelqu'un peut-il aider et suggérer une solution ou une alternative?

Merci!

Answer 1

cette fonction s'appliquera à tout élément qui a la classe bubbleInfo, et souvenez-vous des éléments peuvent avoir plusieurs classes afin

<div id=div1 class="bubbleInfo divs"></div> 

<span id="span1" class="spans "></span> 

<div class="popup bubbleInfo">Content goes here</div> 

devront tous deux l'action appliquée