重构 jQuery 以最小化延迟

Question

所以我有一大堆mouseenter和mouseleave请求，我想知道是否有办法重构它。

j查询代码

// 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>

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

Answer 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>

Answer 2

您可以在下面最好地最小化代码。因为悬停进出同样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();
});