javascript - 我怎样才能在jquery中循环这个函数？

Question

    $( "#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 个盒子，当鼠标进入时，盒子会变大 200px，当鼠标离开时，盒子会变小 200px。我该怎么办才能一直这样做？

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