Jquery/javascript 函数问题答案

【问题标题】：Jquery/javascript function issueJquery/javascript 函数问题
【发布时间】：2016-05-13 18:14:57
【问题描述】：

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

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

【问题讨论】：

嗯，它有什么作用？它什么都不做吗？犯错？让你的电脑崩溃？让飞猴从天上掉下来？给你免费的华夫饼？请澄清。

标签： javascript jquery function parameters jquery-selectors

【解决方案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 事件发生时调用 mouseleave，则传入函数引用：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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!
});

【讨论】：

【解决方案5】：

试试这个 -

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

【讨论】：

【解决方案6】：

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

您的选择器变为"'#main>#one'"。这不会选择任何东西。您可能想省略撇号：
```
$(a+" > #one")…
```
但由于 id 在文档中是唯一的，因此无论如何您都不需要 #main 前缀。直接使用 id 即可：
```
$("#one, #two").stop(true, true).animate({left:'30px'},1100);
```
您是calling the function directly（并将其结果undefined 传递给mouseleave 方法），而不是将其添加为事件处理程序。相反，使用
```
$("#main").mouseleave(function(e) {
     myFunction("#main");
});
```

【讨论】：