如何使用for循环来定位多个div元素？

我需要定位多个div元素。他们都需要采取同样的行动。他们基本上需要放大和缩小。如何使用for循环来定位多个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"); 
    }); 
}

来源

2013-10-03 user2838405

给你的HTML代码也。 – dev

给所有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的动画已经建成？

来源

2013-10-03 09:22:36

正如@ rorymccrossan所说，这可能会导致冗余代码，因为包含jquery动画方法并且效率高达 – Stphane

谢谢Rory。在这种情况下，这是我所需要的。 – user2838405

当我使用tweenLite时，我使用了tweenLite，所以我已经习惯了它，并在网站的其他部分使用它。 – user2838405

不要使用一个循环，而不是事件处理程序绑定到一个ID为“SC”开头的所有元素，然后使用参考实际元素的函数中：

$('[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"); 
});

或者，如Rory建议，改为使用类（类选择器会稍微好一些）。

如果你绝对有使用循环（你不这样做，如上文所示），那么你需要创建一个保存的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); 
}

来源

2013-10-03 09:23:03

您可以将一个事件处理程序作为委托事件附加到第一个共同祖先。如果你有很多div放入你的文档（更好地附加处理程序到每个div），这是一个性能问题。

举个例子

// Delegated event 
    $('#commonAncestorID') 
     .on('mouseover','.divClass', function() { 
      TweenLite.to(this, .5, { css: { scale: 1.3 }, ease: Back.easeOut }); 
      $(this).css("z-index", "100"); 
     }) 
     .on('mouseout','.divClass', function() { 
      TweenLite.to(this, .5, { css: { scale: 1 }, ease: Back.easeIn }); 
      $(this).css("z-index","1"); 
     });

查看文档here

来源

2013-10-03 09:34:01 Stphane

另外，任何将在稍后通过js在此相同容器中追加的div也会对mouseover/mouseout事件产生影响！ – Stphane

$(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"); 
     }); 
    });

来源

2013-10-03 10:08:00

如何使用for循环来定位多个div元素？

回答

相关问题