显示动态内容的工具提示

Question

我有以下HTML代码，其中显示了包含信息的动态行数，然后我点击了一个图片链接，根据{{获取有关所点击行的特定信息 1}}字段..

compentence_ID

这是有效的，我可以根据发布的ID查看相应的信息。但我想知道是否有任何方式在工具提示中显示该信息而无需单击链接并POST该ID。 以下是从单击图像时显示的数据库中检索数据的脚本。

            echo "<td>".$compi['Competence_ID']."</td>";
            echo "<td><p style='text-align: center;'>".$compi['Competence_Group']."</p></td>";
            if(isset($compi['Competence_class'])){echo "<td>".$compi['Competence_class']."</td>";}else echo "<td><p style='text-align: center;'>-</p></td>";
            echo "<td>".$compi['Competence_Description']."</td>";
            echo "<td class='evaluation'>";
                echo "<select class='ownlevelselect' id='ownlevelselect-.".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";
                   if (isset($compi['ownlevel']) && $compi['ownlevel']!= '' && !empty($compi['ownlevel']) && $compi['ownlevel']!= 0) {
                      echo "<option selected value='".$compi['ownlevel']."' selected='selected'>".$compi['ownlevel']."</option>";

                    }
                    echo "<option value='' >--</option>";
                    echo "<option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option>";
                echo "</select>";
                echo $compi['ownlevel'];

// Below are the links I click to view the content
                echo '<a target="_blank" href="'.INDEX.'?categ='.$_GET['categ'].'&action='.$_GET['action'].'&subaction=viewlevels'.'&levels='.$compi['Competence_ID'].'">';
                echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';
            echo "</td>";
            echo "<td>";

Answer 1

简单的答案是：你可以用ajax来做。

我们可以在这里提供确切的代码，但您可能想了解这个概念，所以我相信下一个视频教程是一个很好的起点。

youtube video tutorial: Loading Dynamic Content on MouseOver

在视频说明中，您可以找到视频教程的下载链接以及与之关联的文件。你需要的是第2个例子。

要使示例正常工作，您只需更改配置文件：connect.php和此数据库

-

- 数据库：ajax

---

-

- 表data

的表结构

CREATE TABLE IF NOT NOT EXISTS data（   id int（11）NOT NULL AUTO_INCREMENT，   title varchar（45）NOT NULL，   fname varchar（45）NOT NULL，   lname varchar（45）NOT NULL，   主要关键（id） ）ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 11;

-

- 转储表data

的数据

INSERT INTO data（id，title，fname，lname）价值观 （1，'网络开发者'，'克里斯'，'约翰逊'）， （2，'网页设计师'，'乔'，'黑'）， （3，'老师'，'杰森'，'麦金托什'）， （4，'家庭男'，'杰克'，'川口'）， （5，'Sans Man Card'，'Brett'，'Williams'）， （6，'我不知道......'，'Topher'，'Howden'）， （7，'玩家'，'杰森'，'Luzader'）， （8，'Wingman'，'Chuck'，'Strong'）， （9，'篮球运动员'，'查克'，'巴克利'）， （10，'歌手'，'玛塔'，'佐尔'）;

Answer 2

在代码中

echo '<a target="_blank" compId='$compi['Competence_ID']' href="#">';
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';

请原谅我，如果上面的PHP代码出错了。基本思想是设置锚标签属性的id

 <script>
  $( document ).tooltip({
  items: "img",
  content: function() {
    var element = $( this );
    var parent=element .parent();
    if ( element.is( "img" ) ) {
      var text =  $.ajax({ type: "GET", url: remote_url, async: false, }).responseText;//remoe_url is url of your PHP whenre you have code to return the content in tooltip. You can take id as parent.attr('compId')
      return text;
    }
  }
 });
  </script>