重构jQuery以最大程度地减少延迟

时间：2019-01-01 13:08:37

标签： jquery refactoring

所以我有大量的mouseenter和mouseleave请求，我想知道是否有一种方法可以对其进行重构。

jQuery代码

// product features
  // highly interactive
  $('.highly-interactive').mouseenter( function() {
    $('.highly-interactive-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
  });

  $('.highly-interactive').mouseleave( function() {
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.highly-interactive-image').hide();
    $('.main-image').show();
  });

  // operating system
  $('.operating-system').mouseenter( function() {
    $('.operating-system-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
  });

  $('.operating-system').mouseleave( function() {
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.operating-system-image').hide();
    $('.main-image').show();
  });

  // batteries
  $('.batteries').mouseenter( function() {
    $('.batteries-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
  });

  $('.batteries').mouseleave( function() {
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.batteries-image').hide();
    $('.main-image').show();
  });

  // hypoallergenic
  $('.hypoallergenic').mouseenter( function() {
    $('.hypoallergenic-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
  });

  $('.hypoallergenic').mouseleave( function() {
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.hypoallergenic-image').hide();
    $('.main-image').show();
  });

  // compatible tablet sizes
  $('.compTablet').mouseenter( function() {
    $('.compTablet-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
  });

  $('.compTablet').mouseleave( function() {
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.compTablet-image').hide();
    $('.main-image').show();
  });

  // genuine personality
  $('.genuine-personality').mouseenter( function() {
    $('.genuine-personality-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
  });

  $('.genuine-personality').mouseleave( function() {
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.genuine-personality-image').hide();
    $('.main-image').show();
  });

  // size
  $('.size').mouseenter( function() {
    $('.size-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
  });

  $('.size').mouseleave( function() {
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.size-image').hide();
    $('.main-image').show();
  });

  // soft and safe
  $('.soft-and-safe').mouseenter( function() {
    $('.soft-and-safe-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
  });

  $('.soft-and-safe').mouseleave( function() {
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.soft-and-safe-image').hide();
    $('.main-image').show();
  });

  // expanding app
  $('.expanding-app').mouseenter( function() {
    $('.expanding-app-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
  });

  $('.expanding-app').mouseleave( function() {
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.expanding-app-image').hide();
    $('.main-image').show();
  });

当前，即使在.main-image上设置了display: none;，隐藏.main-image的图像也要延迟一些时间才能显示在其后面

因此，上述所有查询都会发生main-image被隐藏的延迟，因此代码似乎在做什么。

更新

HTML 

<img src="./images/product-features-default.png" alt="plush" class="main-image">

<section class="images">
  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">
  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">
  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">
  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">
  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">
  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">
  <img src="./images/sizeImage.png" alt="Size" class="size-image">
  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">
  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">
</section>

<!-- highly interactive -->
<section class="highly-interactive feature">
  <section class="text">
    <h2>Highly Interactive</h2>

    <section class="hover">
      <img src="./images/HIIcon.svg" class="icon">
      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>
    </section>
  </section>
</section>

<!-- operating system -->
<section class="operating-system feature">
  <section class="text">
    <h2>Operating System</h2>

    <section class="hover">
      <img src="./images/tablet-sizes.svg" class="icon">
      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>
      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">
    </section>
  </section>
</section>

这只是两个部分，但是每个部分都有一个图像，并且每个部分的布局都相同。

2 个答案:

答案 0 :(得分：1)

如果将自定义属性添加到功能部分，则可以大大简化代码。

我已经向每个功能部分添加了feature="highly-interactive"（或等效功能）。然后，代码将此属性拉出到mousenter或mouseleave中。使用一致的命名结构，您可以附加-image以显示/隐藏正确的特征图像。

可以在CSS中突出显示标题。

演示

// Add event for mouse entering a feature
$( ".feature" ).mouseenter(function() {
    
    // Get feature name, append '-image' and show
    $("." + $(this).attr("feature") + "-image").show();
    
    // Hide the main image
    $('.main-image').hide();
    
});


// Add event for mouse leaving a feature
$( ".feature" ).mouseleave(function() {
    
    // Get feature name, append '-image' and hide
    $("." + $(this).attr("feature") + "-image").hide();
    
    // Show the main image
    $('.main-image').show();
    

});
.feature:hover h2 {
  color: #15d4ef;
}

.images img {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="./images/product-features-default.png" alt="plush" class="main-image">

<section class="images">
  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">
  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">
  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">
  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">
  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">
  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">
  <img src="./images/sizeImage.png" alt="Size" class="size-image">
  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">
  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">
</section>

<!-- highly interactive -->
<section feature="highly-interactive" class="highly-interactive feature">
  <section class="text">
    <h2>Highly Interactive</h2>

    <section class="hover">
      <img src="./images/HIIcon.svg" class="icon">
      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>
    </section>
  </section>
</section>

<!-- operating system -->
<section feature="operating-system" class="operating-system feature">
  <section class="text">
    <h2>Operating System</h2>

    <section class="hover">
      <img src="./images/tablet-sizes.svg" class="icon">
      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>
      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">
    </section>
  </section>
</section>

答案 1 :(得分：0)

您可以按照以下最佳方式最小化代码。当鼠标悬停时，mouseenter和mouseleave

您可以进一步将其最小化，但是为此您需要共享html结构，因此我们可以为所有mouseenter和mouseleave事件制作一个通用脚本。

$('.highly-interactive').hover(function(){
    $('.highly-interactive-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
},function(){
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.highly-interactive-image').hide();
    $('.main-image').show();
});

$('.operating-system').hover(function(){
    $('.operating-system-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
},function(){
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.operating-system-image').hide();
    $('.main-image').show();
});

$('.batteries').hover(function(){
    $('.batteries-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
},function(){
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.batteries-image').hide();
    $('.main-image').show();
});

$('.hypoallergenic').hover(function(){
    $('.hypoallergenic-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
},function(){
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.hypoallergenic-image').hide();
    $('.main-image').show();


$('.compTablet').hover(function(){
    $('.compTablet-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
},function(){
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.compTablet-image').hide();
    $('.main-image').show();
});


$('.genuine-personality').hover(function(){
    $('.genuine-personality-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
},function(){
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.genuine-personality-image').hide();
    $('.main-image').show();
});


$('.size').hover(function(){
    $('.size-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
},function(){
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.size-image').hide();
    $('.main-image').show();
});

$('.soft-and-safe').hover(function(){
    $('.soft-and-safe-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
},function(){
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.soft-and-safe-image').hide();
    $('.main-image').show();
});

$('.expanding-app').hover(function(){
    $('.expanding-app-image').show();
    $('h2', this).css('color', '#15d4ef');
    $('.main-image').hide();
    $('.hover', this).show();
},function(){
    $('.hover', this).hide();
    $('h2', this).css('color', '#1A2D45');
    $('.expanding-app-image').hide();
    $('.main-image').show();
});
相关问题
最新问题