工具箱jQuery

Question

我正在尝试使用jQuery设置用户界面，.js脚本从二进制可执行文件中加载一些数据，并且应该将这些数据显示在表示所需源的元素旁边的工具箱中。html页面给出了元素扩展框的结构，从图像中可以看到这一点。我的问题是，工具提示只会弹出最后一个源(音频编解码器06，它覆盖了所有其他源)，而且我需要为每个源提供一个图片盒，因为每当我在不同的源上驱动鼠标时，它都应该改变他的内容，所以每个源都需要一个工具箱。

​

​

在这里，.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> 

控制台将对象记录为$(this)，未定义为'id'：

​

​

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>