Javascript在鼠標事件中獲取跨度內容

Question

我有以下標記，我正在應用成功的JavaScript來生成工具提示，問題是我正在嘗試將工具提示的內容設置爲跨度的內容。

我想不出這樣做的方式沒有500個不同的document.get等等

基本上我想知道：在showTooltip功能，我怎麼能得到動態跨度的內容是什麼？

標記：

<ul class="exec-List"> 
        <li> 
         <img src="file:///C|/Users/tsujp/Documents/Everything/Adobe Projects/DW/KCC/Website/V8/src/committee/mirae.png" /> 

         <span class="tooltip-span">Conten2t</span> 

        </li> 
        <li> 
         <img src="file:///C|/Users/tsujp/Documents/Everything/Adobe Projects/DW/KCC/Website/V8/src/committee/mirae.png" /> 

         <span class="tooltip-span">Content55</span> 

        </li> 
       </ul> 

使用Javascript：

$(document).ready(function() { 

var changeTooltipPosition = function(event) 
{ 
    var tooltipX = event.pageX - 8; 
    var tooltipY = event.pageY + 8; 
    $('div.tooltip').css({top: tooltipY, left: tooltipX}); 
}; 

function showTooltip(event/*, index, el*/) 
{ 
    /*alert($(this).parent(this).get(0).tagName);*/ 

    $('div.tooltip').remove(); 
    $('<div class="tooltip">/* + tooltip_text +*/ </div>') 
     .appendTo('body'); 
    changeTooltipPosition(event); 
}; 

var hideTooltip = function() 
{ 
    $('div.tooltip').remove(); 
}; 

$('span').each(function() 
{ 
    if($(this).hasClass('tooltip-span')) 
    {      
     //tooltip_text = $(el).html(); 

     $(this).parent(this).bind(
     {   
      mousemove : changeTooltipPosition, 
      mouseenter : showTooltip/*(HOW DO I PASS 'EVENT' HERE)*/, 
      mouseleave: hideTooltip 
     }); 
    } 
}); 

}）;

Answer 1

您可以在$('.tooltip-span', this)選擇，並採取text()

function showTooltip(event/*, index, el*/) 
{ 
    var text = $('.tooltip-span', this).text(); 
    /*alert($(this).parent(this).get(0).tagName);*/ 

    $('div.tooltip').remove(); 
    $('<div class="tooltip">' + text + '</div>') 
     .appendTo('body'); 
    changeTooltipPosition(event); 
}; 

JSFiddle