Question

是否可以使用jquery工具提示加载相同的数据？例如，我有这样的数据。

<div class="content"><a href="#"><span id="user_801130021">text1</span></a></div>
<div class="content"><a href="#"><span id="user_801130021">text2</span></a></div>
<div class="content"><a href="#"><span id="user_1301193710">text3</span></a></div>

工具提示仅针对text1和text3显示，但未显示text2的数据，我认为因为那里的ID相同。

这里是我的js代码

$(document).ready(function(){

// initialize tooltip
$( " span" ).tooltip({
    track:true,
    open: function( event, ui ) {
    ui.tooltip.css("max-width", "100%");
          var id = this.id;
          var split_id = id.split('_');
          var userid = split_id[1];

          $.ajax({
              url:'fetch_details.php',
              type:'post',
              data:{userid:userid},
              success: function(response){

                  // Setting content option
                  $("#"+id).tooltip('option','content',response);

              }
          });
    }
});

$(" span").mouseout(function(){
    // re-initializing tooltip
    $(this).tooltip();
    $('.ui-tooltip').hide();
});

}）;

我的fetch_details.php

<?php
$userid = $_POST['userid'];
$query = $db->prepare ("SELECT * FROM master_post WHERE id_master_post =".$userid);
$query->execute();
$html = '<div>';
while ($value = $query->fetch()) {
    $information = html_entity_decode ($value['information']);
    $dom = new DOMDocument();
    @$dom->loadHTML($information);
    $image = $dom->getElementsByTagName('img')->item(0)->getAttribute('src');
    $html .= "<img src='".$image."' height='300px' width='250px'>";
}
$html .= '</div>';
echo $html;
?>

Answer 1

如果它们不像代码那样独特，那么你可以做不同的事情。

类

您可以使用class而不是id。

使用<span class="user_801130021">代替<span id="user_801130021">

您可以使用基本的jQuery选择器访问它们：$('.user_801130021')

HTML5数据属性

另一种选择是将它们用作HTML5数据属性，这在我看来要好得多。他们的格式为data-*。

<span data-user="user_801130021">

您可以按$('span').data('user')获取数据用户值，并按$('span').data('user', value)

进行更改

例如，如果您将id更改为data-user，则必须将var id = this.id;更改为var id = this.data('user');。然后一切都将按计划运作。

Answer 2

我找到了诀窍。

使用循环编号创建唯一ID。

这是我的代码。

$np = 0;
        while ($value = $query->fetch()) {
<div class="content"><a href="#"><span id="user<?php echo np++ ?>_801130021">text1</span></a></div>
}

使用jquery工具提示加载相同的数据

2 个答案:

类

HTML5数据属性