工具提示框jQuery

Question

我想用jQuery建立一个用户界面，一个.js脚本从二进制可执行文件加载一些数据，并将这些数据提交到表示所需源的元素旁边的工具提示框中。如图所示，html页面为元素的扩展框提供了结构。我的问题是，工具提示只会弹出最后一个源代码（音频编解码器06，它会覆盖所有其他源），并且我需要为每个源添加一个Tootlip框，因为每当我将鼠标放在不同的源上时，它都会更改其内容，因此工具提示每个来源的框。

这里.js文件的JavaScript jQuery的：

if (ServiceType=='spu.outputs') { 
    Mode=json.data["OUTPUT_HANDLING"]; 
    if ((Mode=="a") || (Mode==2)) { 
    Mode=2; 
    } else if (Mode=="3") { 
    Mode=3; 
    } else { 
    Mode=1; 
    } 
} 
$('#spu_inputs_services').data("Mode"+ServiceID,Mode); 
Context_ServiceID.find('.extended-monitoring').load('html/monitoring/monitoring-'+ServiceType+'-'+Mode+'.html', function() { 

      if ((ServiceType=='spu.sources')) { 
       console.log ("set tooltip spu.sources"); 
        $(this).tooltip({items: "[data]", 
         content: "<p>test</p>"}); 
    $.getJSON("../"+ServiceName+"/configedit?cfgName=3.&json=1", function (data) { 
      if ((ServiceType=='spu.inputs')) { 
       console.log ("dolbyA"+ $(this)); 
         $(this).tooltip({items: "[dolbyA]", 
         content: "<p>test dolbyA</p>"}); 
      } 
      if ((ServiceType=='spu.inputs')) { 
       console.log ("dolbyB"+$(this)); 
         $(this).tooltip({items: "[dolbyB]", 
         content: "<p>test dolbyB</p>"}); 
      } 
      if ((ServiceType=='spu.inputs')) { 
       console.log ("dolbyC"+$(this)); 
         $(this).tooltip({items: "[dolbyC]", 
         content: "<p>test dolbyC</p>"}); 
      } 
      if ((ServiceType=='spu.inputs')) { 
       console.log ("dolbyD"+$(this)); 
         $(this).tooltip({items: "[dolbyD]", 
         content: "<p>test dolbyD</p>"}); 
      } 
      if ((ServiceType=='spu.inputs')) { 
       console.log ("dolbyE"+$(this)); 
         $(this).tooltip({items: "[dolbyE]", 
         content: "<p>test dolbyE</p>"}); 
      } 
      if ((ServiceType=='spu.inputs')) { 
       console.log ("dolbyF"+$(this)); 
         $(this).tooltip({items: "[dolbyF]", 
         content: "<p>test dolbyF</p>"}); 
      } 

HTML元素：

<div style="clear:both;"> 
     <div style="float:left">Audio Codec 01</div> 
     <div id="AUDIO_CODEC_1" data="dolby" dolbyA="A" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 02</div> 
     <div id="AUDIO_CODEC_2" data="dolby" dolbyB="B" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 03</div> 
     <div id="AUDIO_CODEC_3" data="dolby" dolbyC="C" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 04</div> 
     <div id="AUDIO_CODEC_4" data="dolby" dolbyD="D" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 05</div> 
     <div id="AUDIO_CODEC_5" data="dolby" dolbyE="E" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 06</div> 
     <div id="AUDIO_CODEC_6" class="dolby" dolbyF="F" style="float:right">n/a</div> 
    </div> 

控制台日志[目标对象]为$（本）和未定义“身份证'：

Answer 1

所以我找到了这个问题的一个很好的解决方案，希望可以帮助其他jQuery的怪胎：

 console.log ("dolby "+ServiceType+'-'+ServiceID+'-'+Mode+$(this).html()); 
     $(this).find("div[dolby]").each(function() { 
      console.log ("dolby 2 "+ServiceType+'-'+ServiceID+'-'+Mode+$(this).html()+$(this).attr("dolby")); 
      $(this).tooltip({items: "[dolby]", content: "<p>test dolby "+$(this).attr("dolby")+"</p>"}); 
      } 
     }); 

我也相应改变，其中我'加载从信息.html文件：

<div style="clear:both;"> 
     <div style="float:left">Audio Codec 01</div> 
     <div id="AUDIO_CODEC_1" data="dolby" dolby="1" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 02</div> 
     <div id="AUDIO_CODEC_2" data="dolby" dolby="2" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 03</div> 
     <div id="AUDIO_CODEC_3" data="dolby" dolby="3" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 04</div> 
     <div id="AUDIO_CODEC_4" data="dolby" dolby="4" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 05</div> 
     <div id="AUDIO_CODEC_5" data="dolby" dolby="5" style="float:right">n/a</div> 
    </div> 
    <div style="clear:both;"> 
     <div style="float:left">Audio Codec 06</div> 
     <div id="AUDIO_CODEC_6" data="dolby" dolby="6" style="float:right">n/a</div>