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

Posted 2023-05-08

【中文标题】传递带有参数的函数以悬停在jQuery中

【英文标题】：Passing a function with a parameter to hover in jQuery

【发布时间】：2013-04-18 12:05:54

【问题描述】：

我是 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/ 这显示了我试图在悬停时设置动画的对象，悬停适用于绿色形状（此消息中的第一段代码）。

【参考方案1】：

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

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

小提琴：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);

这个小提琴有wheel1和wheel2的圆圈：http://jsfiddle.net/F4Yjj/7/

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

【讨论】：

啊，有道理，谢谢！虽然如果我想让每个部分的环中间出现一个不同的对象，这仍然是解决这个问题的方法吗？

这取决于你想出现什么。会不会像一个标签，还是总是显示在同一个地方但文字内容发生变化的东西？

我编辑了 jsfiddle 和我的帖子来说明我的想法。现在应该已经上线了。

根据您更新的代码，用建议更新了我的答案。

啊，我终于明白了！非常感谢，也许下次我会以更好的方式来避免每次都加载新对象。但非常感谢！这很有意义。

【参考方案2】：

通过使用类选择器来使用类而不是 ID，您的悬停将应用于所有适用的类。附带说明一下，我不会使用悬停，因为我相信它在 jquery 1.9.1 或 2 中已被弃用，而是您可以只使用 mousein 和 mouseout。

类似：

$(document).ready(function()
  $('body').on('mousein','.wheel',function()
    $(this).animate('stroke-width':'100',300);
  );

  $('body').on('mouseout','.wheel',function()
    $(this).animate('stroke-width':'55',300);
  );
);

然后确保所有带有 id 的***都有一个额外的类 .wheel

【讨论】：

有趣。你在哪里看到hover 被贬值了？

.hover() 未被弃用。但是，"hover" 伪事件是完全不同的，它是：api.jquery.com/on/#additional-notes。另见bugs.jquery.com/ticket/11731

啊，我想我一定看到了我的错误的伪事件