如何在 jquery 中循环这个函数？答案

【问题标题】：How can I loop this functions in jquery?如何在 jquery 中循环这个函数？
【发布时间】：2015-03-23 18:32:36
【问题描述】：

    $( "#transbox1" ).one( "mouseenter", function() {
  $( this ).css( "width", "+=200" );
  $( this ).css( "height", "+=200" );
});
$( "#transbox1" ).one( "mouseleave", function() {
  $( this ).css( "width", "-=200" );
  $( this ).css( "height", "-=200" );
});
$( "#transbox2" ).one( "mouseenter", function() {
  $( this ).css( "width", "+=200" );
  $( this ).css( "height", "+=200" );
});
$( "#transbox2" ).one( "mouseleave", function() {
  $( this ).css( "width", "-=200" );
  $( this ).css( "height", "-=200" );
});
$( "#transbox3" ).one( "mouseenter", function() {
  $( this ).css( "width", "+=200" );
  $( this ).css( "height", "+=200" );
});
$( "#transbox3" ).one( "mouseleave", function() {
  $( this ).css( "width", "-=200" );
  $( this ).css( "height", "-=200" );
});
$( "#transbox4" ).one( "mouseenter", function() {
  $( this ).css( "width", "+=200" );
  $( this ).css( "height", "+=200" );
});
$( "#transbox4" ).one( "mouseleave", function() {
  $( this ).css( "width", "-=200" );
  $( this ).css( "height", "-=200" );
});

我有 4 个盒子，使用 mouseenter，盒子会变大 200px，当鼠标离开时，盒子会变小 200px。我怎么能一直这样做？

【问题讨论】：

你可以使用相同的类，不需要循环
现在您使用的是.one() - 事件调用一次然后分离 - 还是.on()？

标签： javascript jquery html loops

【解决方案1】：

只需为所有这些添加一个类

   <div class="myClass" id="transbox1"></div>

   $( ".myClass" ).on( "mouseenter", function() {
    $( this ).css( "width", "+=200" );
    $( this ).css( "height", "+=200" );
   });
  $( ".myClass" ).on( "mouseleave", function() {
    $( this ).css( "width", "-=200" );
    $( this ).css( "height", "-=200" );
  });

【讨论】：

@indubitablee 您确定要将.one 编辑为.on 吗？ jQuery 中两者都有一个函数。
是的，我现在明白了。
感谢您的检查，无论如何 :) @TimLewis
@TimLewis 道歉，你是对的，我认为 OP 想要一个带有 mouseenter 和 mouseover 的“悬停”效果（而不是 .one）。我的解释更多是因为他想要 .on 而不是 .one
@indubitablee 我知道，我必须检查.one 实际上是一个函数：P 但是你的编辑是正确的，OP 不想要一次，所以你可以保持原样。

【解决方案2】：

将一个类应用于所有元素，然后您可以使用类选择器一次处理所有元素：

HTML：

<div id"transbox1" class="transbox"></div>
<div id"transbox2" class="transbox"></div>
<div id"transbox3" class="transbox"></div>
...

Javascript：

$( ".transbox" ).on( "mouseenter", function() {
  $( this ).css( "width", "+=200" );
  $( this ).css( "height", "+=200" );
});
$( ".transbox" ).on( "mouseleave", function() {
  $( this ).css( "width", "-=200" );
  $( this ).css( "height", "-=200" );
});

【讨论】：

是的，但他们仍然会这样做一次。
哦，是的，我完全错过了。使用.on() 而不是.one()

【解决方案3】：

请尝试以下代码 sn-p。

$("div[id^='transbox']").one( "mouseenter", function() {
  $( this ).css( "width", "+=200" );
  $( this ).css( "height", "+=200" );
});
$("div[id^='transbox']").one( "mouseleave", function() {
   $( this ).css( "width", "-=200" );
   $( this ).css( "height", "-=200" );
});

我假设你的盒子是 div 标签。

【讨论】：

【解决方案4】：

为所有这些盒子提供一个通用名称或类，然后使用下面的代码以防它们具有通用名称 - transbox：

$("[name=transbox]" ).one( "mouseenter", function() {
  $( this ).css( "width", "+=200" );
  $( this ).css( "height", "+=200" );
});
$("[name=transbox]" ).one( "mouseleave", function() {
  $( this ).css( "width", "-=200" );
  $( this ).css( "height", "-=200" );
});

【讨论】：