Javascript 在鼠标事件发生时获取 Span 内容

Question

我有以下标记，我正在应用后续的 Javascript 以生成工具提示，问题是我试图将工具提示的内容设置为范围的内容。

如果没有 500 个不同的 document.get 等，我无法找到一种方法来做到这一点...

基本上我想知道:在showTooltip函数中，如何动态获取span的内容？

标记:

<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