jquery - 传递带有参数的函数以在 jQuery 中悬停

Question

我是 jQuery 的新手，我觉得我错过了一些非常明显和基本的东西，但我不能完全理解它。

无论如何，我有一些代码可以在将对象悬停在上方时将笔划宽度动画化到更宽的数量并且它起作用了:

$(function() {
    $("#wheel1").hover(grow1, shrink1);
});

function grow1(evt) {
    $("#wheel1").animate({'stroke-width':'100'},300);
    $("#circle1container").css({'display':'block'});
    $("#circle1container").animate({'opacity':'1'},300);
}

function shrink1(evt) {
    $("#wheel1").animate({'stroke-width':'55'},300);
    $("#circle1container").animate({'opacity':'0'},300);
}

但我还有 10 个其他对象也想为之执行此操作，因此我没有再复制和粘贴 9 次并更改数字 9 次，而是尝试合并它，但没有成功:

$(function() {
$("#wheel1").hover(grow("1"), shrink("1"));
$("#wheel2").hover(grow("2"), shrink("2"));
$("#wheel3").hover(grow("3"), shrink("3"));
$("#wheel4").hover(grow("4"), shrink("4"));
$("#wheel5").hover(grow("5"), shrink("5"));
$("#wheel6").hover(grow("6"), shrink("6"));
$("#wheel7").hover(grow("7"), shrink("7"));
$("#wheel8").hover(grow("8"), shrink("8"));
$("#wheel9").hover(grow("9"), shrink("9"));
$("#wheel10").hover(grow("10"), shrink("10"));

function grow(number) {
var name = "#wheel" + number;
$("#wheel" + number).animate({'stroke-width':'100'},300);
$("#circle" + number + "container").css({'display':'block'});
$("#circle" + number + "container").animate({'opacity':'1'},300);
}

function shrink(number) {
$("#wheel" + number).animate({'stroke-width':'55'},300);
$("#circle" + number + "container").animate({'opacity':'0'},300);
}

});

可能仍然不是最有效的方法，但我认为它的长度更短并且更容易改变。我只是不确定这里的交易是什么。欢迎任何帮助，谢谢!

http://jsfiddle.net/F4Yjj/5/这显示了我尝试在悬停时设置动画的对象，悬停适用于绿色形状(此消息中的第一位代码)。

Answer 1

不要使用必须唯一的 ID 选择轮子，而是给每个轮子一个类“wheel”，这样您就可以一次选择所有的轮子:

<path id="wheel10" class="wheel" .... />
<path id="wheel9" class="wheel" ... />
etc.

然后，您可以使用 jQuery 选择所有“轮子”，并在您的函数中使用 $(this) 引用悬停的那个:

$(function() {
    $("path.wheel").hover(grow1, shrink1);
});

function grow1() {
    $(this).animate({'stroke-width':'100'},300);
}

function shrink1() {
    $(this).animate({'stroke-width':'55'},300);
}

fiddle :http://jsfiddle.net/F4Yjj/1/

编辑:使用此方法，您的函数中不需要“evt”。 http://jsfiddle.net/F4Yjj/3/

编辑:还显示另一个元素。鉴于每个轮子都有不同的物理元素(如更新后的 HTML 中所示)，您可以确定悬停轮子的 ID 并通过其 ID 选择其他元素:

function grow1() {
    var id=$(this).prop('id').split('_');
    $(this).animate({'stroke-width':'100'},300);
    $("#circlecontainer_"+id[1]).fadeIn(300);
}

function shrink1() {
    var id=$(this).prop('id').split('_');
    $(this).animate({'stroke-width':'55'},300);
    $("#circlecontainer_"+id[1]).fadeOut(100);
}

这个 fiddle 有 wheel1 和 wheel2 的圆圈:http://jsfiddle.net/F4Yjj/7/

您还可以通过为所有轮子使用一个中心圆来压缩它。悬停时，用适当的百分比、颜色等更新圆圈的文本。