0

我有一个 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"));

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

4

6 回答 6

2

有几个问题：

1. 选择器

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

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

注意'里面的字符。现在，如果你删除'字符，你会得到：

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

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

你的id="one"和id="two"元素可能应该有class="one"and 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，这不会做任何有用的事情。

如果您的目标myFunction 是在mouseleave，则传入一个函数引用：

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

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

于 2013-05-05T18:41:09.320 回答
1

该mouseLeave函数将函数作为参数。您正在传递一个已执行的函数（一个带有参数的函数），因此函数的结果将作为参数传递给mouseLeave（而不是函数本身）。

您需要将它包装在另一个函数中，该函数将myFunction在新的匿名函数中调用您的函数。

假设这myFunction件作品是正确的，那么你需要这样的东西：

$("#main").mouseleave(new function() {
    myFunction("#main");
});
于 2013-05-05T18:40:13.537 回答
1

选择器连接不正确。jquery 函数接受一个字符串作为选择器参数，不需要用单引号括起来。

function myFunction(a)
{
    $(a+">#one").stop(true, true).animate({left:'30px'},1100);
    $(a+">#two").stop(true, true).animate({left:'30px'},1100);
}
于 2013-05-05T18:38:51.570 回答
0

尝试这个 -

$(a+" > #one").stop(true, true).animate({left:'30px'},1100);
$(a+" > #two").stop(true, true).animate({left:'30px'},1100);
于 2013-05-05T18:39:22.217 回答
0

http://jsbin.com/ifunof/1/edit

function myFunction(a){
    $(a+">#one").stop().animate({left:30},1100); // <-- fixed selectors
    $(a+">#two").stop().animate({left:30},1100);
}

$("#main").mouseleave(function(){ // <-- (immediate call: Wrong)
  myFunction("#main");            // <-- fn reference: OK!
});
于 2013-05-05T18:41:22.100 回答
0

好吧，您的代码中有两处错误：

  • 您的选择器变为"'#main>#one'". 这不会选择任何东西。您可能想省略撇号：

    $(a+" > #one")…

    但是由于 id 在文档中是唯一的，所以无论如何您都不需要#main前缀。直接使用ID：

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

  • 您直接调用该函数（并将其结果 , 传递undefined给该mouseleave方法），而不是将其添加为事件处理程序。相反，使用

    $("#main").mouseleave(function(e) {
     myFunction("#main");
});
于 2013-05-05T18:41:46.860 回答