Question

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

tooltip box on source audio codec 6

这里.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）记录[object Object]，为'id'记录undefined：

Console log

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>

工具提示框jQuery

1 个答案: