文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >重构jQuery以减少延迟

问重构jQuery以减少延迟
EN

Stack Overflow用户
提问于 2019-01-01 13:08:37
回答 2查看 47关注 0票数 1

因此，我有大量的鼠标和鼠标保存请求，我想知道是否有一种方法来重构它。

jQuery代码

代码语言：javascript
运行
复制
// 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上设置的，但是应该显示的图像显示在它后面。

因此，代码似乎在做它应该做的事情

更新

HTML

代码语言：javascript
运行
复制
<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>

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

jquery
refactoring
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-01-01 15:05:24

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

我已经在每个特性部分中添加了feature="highly-interactive" (或等效的)。然后，代码提取出一个mousenter或mouseleave属性。有了一致的命名结构，您就可以追加-image以显示/隐藏正确的功能图像。

标题的突出显示可以用CSS完成。

演示

​

代码语言：javascript
运行
复制
// 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();
    

});
代码语言：javascript
运行
复制
.feature:hover h2 {
  color: #15d4ef;
}

.images img {
  display: none;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2019-01-01 13:44:11

您可以最大限度地减少代码在下面的方式。作为悬停进出是作为mouseenter和mouseleave

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

代码语言：javascript
运行
复制
$('.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();
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53995691

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档