0

我正在制作一个带有文本气泡的程序。当您将文本悬停时，它应该显示另一个文本。每个气泡都有以 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>

"Console.log("hover"+i)" 总是打印： hover3 即使我悬停气泡 1

4

0 回答 0