Question

我正在尝试创建一个简单的工具提示函数（我正在尝试学习jQuery，所以请不要为此建议插件）。当我像这样写它时它起作用：

             $('span.toolTip').hide();
             function toolTip() {
                $('.targetLink').mouseover(function() {                
                    $('.toolTip').show().html('Hello there');
                });
            }

            <span class='toolTip'></span>
            <a href="#" class="targetLink">Hover over me</a>

但是当我尝试通过函数传递参数时，它不起作用：

    $('span.toolTip').hide();
    function toolTip(target, tooltip, message) {
        var target = '.' + target;
        $(target).mouseover(function() {
            var tooltip = '.' + tooltip;
            $(tooltip).show().html(message);
        });
    }

    toolTip('targetLink', 'toolTip', 'Hello There');

    <span class='toolTip'></span>
    <a href="#" class="targetLink">Hover over me</a>

Answer 1

您正在使用新的本地target变量“隐藏”target参数：

function toolTip(target, tooltip, message) {
    // this target is not the same as the parameter target
    var target = '.' + target;

只需删除var，它就应该有效：

function toolTip(target, tooltip, message) {
    target = '.' + target;
    ...

Answer 2

你没有得到正确的.class selector，因为变量是undefined，它应该是：

function toolTip(target, tooltip, message) {
    $('.' + target).mouseover(function() {
        $('.' + tooltip).show().html(message);
    });
}

目前您正在创建一个新变量...而不是正确的选择器。 You can test the updated/working version here

Answer 3

您的代码无效，因为变量tooltip未定义。

$(target).mouseover(function() {
    var tooltip = '.' + tooltip;
    alert(tooltip); //undefined
    $(tooltip).show().html(message);
});

请参阅jsfiddle中的错误。

修改

正如@nick所说，你未定义，因为你正在使用var中的关键字var tooltip创建一个新的局部变量。因此，要修复此问题，请移除var，您将获得外部变量（closure）。

在jsfiddle中查看正确的代码。

$(target).mouseover(function() { tooltip = '.' + tooltip; $(tooltip).show().html(message); });

为什么这个jQuery代码不起作用？

3 个答案: