[英]jQuery closures and event function (mouseover, mouseout, …)
我试图了解如何在jQuery事件函数中使用闭包。
我当前的问题是使屏幕上的形状变圆,并使其在鼠标悬停时停止并消失,在鼠标悬停时消失并重新开始。 我必须使用图像映射来创建圆形的鼠标悬停敏感区域。 虽然动画效果很好,但我仍然无法像我希望的那样在mouseover函数上使用闭包。
鉴于此设置:
(function($){
$.fn.xyz = function( option ) {
// override defaults with specified option
option = $.extend( {}, $.fn.xyz.option, option );
return this.each(function(index, element) {
// run works fine.
function run(index) {
$(".ball:eq(" + index + ")").css({top: 500).startAnimation({ top: -500}, 1000, "linear", (function (i) {
return function() {
run(i);
}})(index));
}
//1 this version works great but I don't like the .parent().parent() especially as the animation requires
// just the ball I hover over gets the opacity assigned
$("area").mouseover(
function () {$(this).parent().parent().css('opacity', 0.5);}
);
//2 this version makes all balls transparent on page load
$("area").mouseover(
(function (activeElement) {
$(activeElement).css('opacity', 0.5);
})(this)
);
//3 this version makes all balls transparent on the first mouse over event
$("area").mouseover(
(function (activeElement) {
return function() {
$(activeElement).css('opacity', 0.5);
}
})(this)
);
//4 also this version affecs all balls and not just the one that is mouse overed
var activeBall = $(this);
$("area").mouseover(function () {
$(activeBall).css('opacity', 0.5);
}).mouseout(function () {
$(activeBall).css('opacity', 1);
});
run(index);
});
},
$.fn.xyz.option = {};
})(jQuery);
为什么版本2、3和4的目标是所有元素,而不仅仅是活动悬停的元素。 我将如何利用闭包来避免使用索引或类似的解决方法?
非常感谢!
您将其设置为自调用匿名函数。 基本上,它是使用jQuery对象自动调用的。 您还把函数包装在函数中……我不明白。 这应该工作:
(function($){
$.fn.xyz = function( option ) {
// override defaults with specified option
option = $.extend( {}, $.fn.xyz.option, option );
return this.each(function(index, element) {
// run works fine.
function run(index) {
$(".ball:eq(" + index + ")").css({top: 500).startAnimation({ top: -500}, 1000, "linear", (function (i) {
return function() {
run(i);
}})(index));
}
//1 this version works great but I don't like the .parent().parent() especially as the animation requires
// just the ball I hover over gets the opacity assigned
$("area").mouseover(
function () {$(this).parent().parent().css('opacity', 0.5);}
);
//2 this version makes all balls transparent on page load
$("area").mouseover(
(function (activeElement) {
$(activeElement).css('opacity', 0.5);
})
);
//3 this version makes all balls transparent on the first mouse over event
$("area").mouseover(
(function (activeElement) {
return function() {
$(activeElement).css('opacity', 0.5);
}
})
);
//4 also this version affecs all balls and not just the one that is mouse overed
var activeBall = $(this);
$("area").mouseover(function () {
$(activeBall).css('opacity', 0.5);
}).mouseout(function () {
$(activeBall).css('opacity', 1);
});
run(index);
});
},
$.fn.xyz.option = {};
})(jQuery);
基本上,SIAF正在做这样的事情:
(function(txt) { alert(txt); })('Hello world!');
您声明一个匿名函数(它没有名称),该函数接受一个参数,然后在括号的末尾调用它,并且括号中的是函数的参数。
所以,当你说
(function (activeElement) {
return function() {
$(activeElement).css('opacity', 0.5);
}
})(this)
编译器看到“使用此对象作为参数激活功能”。 看到这将如何在您声明的函数外部引用jQuery对象,jQuery将其视为“使用.css函数更改我拥有的所有元素”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.