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到工具提示內容

回答

相關問題