javascript - Jquery/javascript函数问题

Question

我有一个 JavaScript 函数来做一些动画，它的参数是父选择器。

function myFunction(a)
{
$("'"+a+">#one'").stop(true, true).animate({left:'30px'},1100);
$("'"+a+">#two'").stop(true, true).animate({left:'30px'},1100);
}

下面一行正在调用该函数。

$("#main").mouseleave(myFunction("#main"));

但这不起作用，谁能告诉我我的代码出了什么问题？

Answer 1

有几个问题:

1。选择器

只需在头脑中进行字符串替换即可。如果您将 #main 传递到您的函数中，那么您的选择器最终看起来像这样:

$("'#main>#one'")...

请注意其中的 ' 字符。现在，如果删除 ' 字符，您将得到:

$("#main>#one")...

...这意味着“具有 id “one” 的元素是具有 id 的元素的子元素 “main”。现在可以使用，但它表明您对多个元素使用相同的id(“one”)。您不能在 HTML 中做到这一点。

您的 id="one" 和 id="two" 元素可能应该具有 class="one" 和 class ="two" 相反，如果是这样，您的代码应如下所示:

function myFunction(a)
{
$(a+">.one").stop(true, true).animate({left:'30px'},1100);
$(a+">.two").stop(true, true).animate({left:'30px'},1100);
}

2。功能

在您的代码中调用 myFunction:

$("#main").mouseleave(myFunction("#main")); // <== Wrong

...您正在立即调用myFunction并将其返回值传递给mouseleave。由于它没有明确的返回值，因此您最终会将 undefined 赋值给 mouseleave，这不会做任何有用的事情。

如果您的目标是在 mouseleave 事件发生时调用myFunction，则传入函数引用:

$("#main").mouseleave(function() {
    myFunction("#main");
});

也许值得从当前的任务中退一步，学习一些基本的 jQuery(和 JavaScript)教程，以巩固您对其中一些概念的理解，例如 id 是唯一的，将函数传递为事件处理程序、字符串连接等。