jQuery UI工具提示，在图像映射上我怎样才能得到<area>的ID到工具提示内容

我有一个映射区域的映像。每个区域都有ID，Coords等。我想要显示jQuery ui tooltip并在工具提示中包含<area>的ID。下面是代码在<head>：jQuery UI工具提示，在图像映射上我怎样才能得到<area>的ID到工具提示内容

<script src="js/jquery-1.11.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

<!-- Bootstrap core CSS --> 
<link rel="stylesheet" href="css/bootstrap.min.css" /> 
<link rel="stylesheet" href="css/bootstrap-theme.min.css" /> 

<script type='text/javascript' src='js/jquery-ui.min.js'></script> 
<link rel='stylesheet' type='text/css' href='css/themes/smoothness/jquery-ui.min.css' /> 

$(document).ready(function() { 
    $(document).tooltip(
     { 
      content: 'My ID is: ' + this.id, 
      track: true 
     }); 
});

下面是一些例子HTML：

<img src="map.jpg" usemap="#coord" alt="a map" /> 
<map id="coord"> 
    <area shape="rect" coords="0,0,10,10" id="Z1" title="zone 1 of 100" /> 
    <area shape="rect" coords="11,0,20,10" id="Z2" title="zone 2 of 100" /> 
</map>

我希望有在这种情况下，工具提示显示的是，“我的ID是：Z1”和“我的ID是Z2'。

不幸的是，在这两种情况下，工具提示显示'我的ID是：undefined'。

如果我将this.id更改为id，则javascript中断消息'ReferenceError：id未定义'。

并使用$(this)给出'我的ID是：[object Object]'。这使我尝试JSON.stringify($(this))，我得到一个提示看起来像：

My ID is: {"0":{"location":

{},"jQuery111107594155618357165":1},"context":

{"location":

{},"jQuery111107594155618357165":1},"length":1}

哇！我难住试图获得该ID ..任何帮助将不胜感激。

编辑：我想获得id到该工具提示函数，以便我可以使用ajax来调用一些数据。我知道我可以创建一个带有等待地图区域的onmouseover的信息的隐藏div，但是当典型的使用将转到特定的区域时，我不希望加载所有数据（超过100个查询），只需要数据。我会做一个点击功能来运行它，但地图区域被链接并点击重定向。

来源

2015-08-24 Chris O

使用jQuery UI，只需使用默认的功能。工具提示可以附加到任何元素，所以把id放在html中。

<map id="coord"> 
    <area shape="rect" coords="0,0,10,10" id="Z1" title="z1" /> 
    <area shape="rect" coords="11,0,20,10" id="Z2" title="z2" /> 
</map> 

<script> 
    $(function() { 
    $(document).tooltip({ 
     position: { 
     my: "center bottom-20", 
     at: "center top", 
     using: function(position, feedback) { 
      $(this).css(position); 
      $("<div>") 
      .addClass("arrow") 
      .addClass(feedback.vertical) 
      .addClass(feedback.horizontal) 
      .appendTo(this); 
     } 
     } 
    }); 
    }); 
</script> 

    <style> 
    .ui-tooltip, .arrow:after { 
    background: #eee; 
    border: 1px solid #ccc; 
    } 
    .ui-tooltip { 
    padding: 5px; 
    color: #fff; 
    border-radius: 20px; 
    font: bold 14px "Helvetica Neue", Sans-Serif; 
    text-transform: uppercase; 
    box-shadow: 0 0 2px #333; 
    } 
    .arrow { 
    width: 70px; 
    height: 16px; 
    overflow: hidden; 
    position: absolute; 
    left: 50%; 
    margin-left: -35px; 
    bottom: -16px; 
    } 
    .arrow.top { 
    top: -16px; 
    bottom: auto; 
    } 
    .arrow.left { 
    left: 20%; 
    } 
    .arrow:after { 
    content: ""; 
    position: absolute; 
    left: 20px; 
    top: -20px; 
    width: 25px; 
    height: 25px; 
    box-shadow: 3px 2px 5px -5px black; 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 
    .arrow.top:after { 
    bottom: -20px; 
    top: auto; 
    }

此外，通过引导，我想你可以用酥料饼的，是这样的：

map.on('click', function(evt) { 
    var element = popup.getElement(); 
    var coordinate = evt.coordinate; 
    var id=evt.id; 
    $(element).popover('destroy'); 
    popup.setPosition(coordinate); 
    $(element).popover({ 
    'placement': 'top', 
    'animation': false, 
    'html': true, 
    'content': '<p>The location you clicked was:</p><code>' + coordinate + '</code>' 
    }); 
    $(element).popover('show'); 
});

我希望这帮助。

来源

2015-08-25 18:10:49

Madalina，谢谢你的建议。我试图在内容中获取ID，因为我需要它使用该ID执行ajax操作。我会编辑我的问题以反映这一愿望。再次感谢。 –

克里斯，我明白你的理由，但你已经在HTML中的id，我认为你可以在那里做ajax操作。 –

无论如何，在第二个例子中，你可以把id放在这一行：'content'：'

你点击的位置是：

' + id+ ''。我希望我的建议可以帮助你。 –

jQuery UI工具提示，在图像映射上我怎样才能得到<area>的ID到工具提示内容

回答

相关问题