jquery hover:使用函数并传递参数使其立即运行

总之，这行得通--> http://jsfiddle.net/mammolastan/ccafu/3/

this doesn't -> http://jsfiddle.net/mammolastan/2mZVu/

我正在使用jQuery悬停。

在示例1中，函数append(e)只在鼠标悬停时运行，这正是我想要的。

但是，如示例2所示，当我尝试向函数append(e)传递参数时，append(e)在页面加载时立即运行，脚本不起作用。

我试着寻找jquery悬停问题的其他例子，但我找不到任何调用现有函数的例子，我只能找到在悬停调用中定义函数的例子。

Ex1是——>

 <html>
    <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>
    <li class='fade'>Socks</li>
    </ul>
    <script>
$("li").hover(append,remove);
$("li.fade").hover(flash);
function append(e)
{
    alert(e);
    $(this).append($("<span> ***</span>"));
}
function remove(e)
{
    $(this).find("span:last").remove();
}
function flash(e)
{   $(this).fadeOut(100);$(this).fadeIn(500);   
}
</script>

Ex 2只在这里更改->

$("li").hover(append('some string'),remove);

正如adeneo所说，添加括号会立即执行该函数。

传递参数的一种方法是在HTML元素上添加一个属性

<li text="some text" >Milk</li>

然后添加监听器

$("li").hover(append, remove);

你的append函数看起来像这样

function append()
{
    node = $(this);
node.append("<span>"+node.attr('text')+"</span>");
}

下面是小提琴的例子:http://jsfiddle.net/2mZVu/7/

另一种方法是调用匿名函数。您可以使用字符串传递currentTarget元素:

$("li").hover(function(e){append(e.currentTarget, 'somestring')}, remove);

那么，你的函数将有两个参数:目标和字符串。你的函数看起来像这样:

function append(e,a)
{
    $(e).append("<span>"+a+"</span>");
}

下面是小提琴的例子:http://jsfiddle.net/2mZVu/7/

开头说，我真的不喜欢第二种方法，因为代码不干净。我不知道优化，但我很确定第一种方法更快。

快乐

相关内容

最新更新

热门标签：