不同的悬停功能获得共享回调功能

Question

我正在制作带有文字气泡的程序。当您悬停文本时，它应该显示另一个文本。每个气泡都有以Json格式存储的唯一文本字符串。 问题是它们都会为悬停效果获得相同的回调。每个气泡文本都设置为与数据结构中的最后一个气泡相同。

代码：

     function createBubbles() {
            for ( var i = 0; i < bubbles.length; i++) {
              var bubbleInfo = bubbles[i];
              var text1=bubbleInfo['small_text'];
              var text2=bubbleInfo['full_text'];
              $('body').append(BubbleTemplate).children('#newBubble').attr("id",
                  'bubble' + i).hide().html('<a>'+text1+'</a>').hover(function(){
                    console.log("hover"+i);
                    $(this).children('a').css({'font-size': '14px'}).text(text2);
                  }, function(){
                    $(this).children('a').css({'font-size': '40px'}).text(text1);
                  });
            }
          }

数据结构网络：

 var bubbles = [
          {
            "start": "0.05",
            "stop": "0.4",
            "small_text": "Head1",
            "full_text": "description1"
          },
          {
            "start": "0.3",
            "stop": "0.7",
            "small_text": "Head2",
            "full_text": "description2"
          },
          {
            "start": "0.35",
            "stop": "0.8",
            "small_text": "Head3",
            "full_text": "description3"
          }, ];

Html模板：

<div id="newBubble" class="text-bubble animated"><a></a></div>

＆＃34; CONSOLE.LOG（＆＃34;悬停＆＃34 + I）＆＃34;总是打印：hover3即使我悬停气泡1