如何使用for循环来针对多个div元素？
如何使用for循环来针对多个div元素？
提问于 2013-10-03 09:17:33
我需要针对多个div元素。他们都需要同样的行动。他们基本上需要在悬停和下潜时进行放大。
如何将变量从循环传递到jquery和gsap？
for (var sca = 1; sca<=12; sca++) {
$( "#sc"+sca ).mouseover(function() {
TweenLite.to("sc"+sca, .5, {css:{ scale:1.3 }, ease:Back.easeOut});
$( "#sc"+sca ).css("z-index","100");
})
.mouseout(function() {
TweenLite.to(sc1, .5, {css:{ scale:1 }, ease:Back.easeIn});
$( "#sc"+sca ).css("z-index","1");
});
}回答 4
Stack Overflow用户
回答已采纳
发布于 2013-10-03 09:22:36
将所有div元素都赋予相同的类，然后可以使用该类选择器同时将相同的事件处理程序附加到所有这些元素，而无需循环。就像这样：
$('.myClass')
.mouseover(function() {
TweenLite.to(this, .5, { css: { scale: 1.3 }, ease: Back.easeOut });
$(this).css("z-index", "100");
})
.mouseout(function() {
TweenLite.to(this, .5, { css: { scale: 1 }, ease: Back.easeIn });
$(this).css("z-index","1");
});另外，我不知道为什么要使用TweenLite，而jQuery有内置的动画吗？
Stack Overflow用户
发布于 2013-10-03 10:08:00
$(document).ready(function () {
$('.fooDiv').mouseover(function () {
TweenLite.to(this, .5, { css: { scale: 1.3 }, ease: Back.easeOut });
$(this).css("z-index", "100");
})
.mouseout(function () {
TweenLite.to('sc1', .5, { css: { scale: 1 }, ease: Back.easeIn });
$(this).css("z-index", "1");
});
});Stack Overflow用户
发布于 2013-10-03 09:23:03
不要使用循环，而是使用以"sc“开头的id将事件处理程序绑定到所有元素，然后使用对函数中实际元素的引用：
$('[id^="sc"]').mouseover(function() {
TweenLite.to(this.id, .5, {css:{scale:1.3}, ease:Back.easeOut});
$(this).css("z-index","100");
})
.mouseout(function() {
TweenLite.to(this.id, .5, {css:{scale:1}, ease:Back.easeIn});
$(this).css("z-index","1");
});或者，就像罗里建议的那样，用类代替(类选择器会稍微好一些)。
如果您必须使用一个循环(如上面所演示的，不使用循环)，那么您将需要创建一个包含该迭代的sca值的闭包：
for(var sca = 1; sca <= 12; sca++) {
(function(sca) {
$( "#sc"+sca).mouseover(function() {
TweenLite.to("sc"+sca, .5, {css:{scale:1.3}, ease:Back.easeOut});
$( "#sc"+sca ).css("z-index","100");
})
.mouseout(function() {
TweenLite.to("sc" + sca, .5, {css:{scale:1}, ease:Back.easeIn});
$( "#sc"+sca ).css("z-index","1");
});
})(sca);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19155338
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号