优化多元素mouseenter/mouseleave函数，减少代码重复

看你的代码就知道，每个按钮都在重复几乎一模一样的事件绑定逻辑——这正是DRY（Don't Repeat Yourself）原则要解决的核心问题！我们可以通过数据属性关联按钮与对应图标，再统一绑定事件的方式，把冗余代码压缩到几行，后续维护也更省心。

第一步：给按钮添加统一标识与关联属性 #

先调整你的HTML结构，给所有捐赠按钮加一个共同的类（比如.donate-btn），再用data-icon属性直接指定对应图标的类名，让按钮和图标建立明确的关联：

<button id="donate-btn1" class="donate-btn" data-icon="icon-donate-50">50</button>
<button id="donate-btn2" class="donate-btn" data-icon="icon-donate-100">100</button>
<button id="donate-btn3" class="donate-btn" data-icon="icon-donate-200">200</button>
<button id="donate-btn4" class="donate-btn" data-icon="icon-donate-400">400</button>
<button id="donate-btn5" class="donate-btn" data-icon="icon-donate-750">750</button>
<button id="donate-btn6" class="donate-btn" data-icon="icon-donate-1000">1000</button>

<!-- 对应的图标元素，建议也加个统一类名方便批量操作 -->
<div class="donate-icon icon-donate-50" style="display:none;">...</div>
<div class="donate-icon icon-donate-100" style="display:none;">...</div>
<!-- 其他图标同理 -->

第二步：统一编写事件处理逻辑 #

现在只需要写一次事件绑定，就能处理所有按钮的悬停逻辑，还能确保同一时间只显示一张图标：

// 提前缓存所有捐赠图标，减少重复DOM查询提升性能
const allDonateIcons = $('.donate-icon');

// 给所有捐赠按钮绑定统一的悬停事件
$('.donate-btn')
  .on('mouseenter', function() {
    // 先隐藏所有图标，避免多个图标同时显示
    allDonateIcons.hide();
    // 获取当前按钮对应的图标类名，淡入显示
    const targetIcon = $(this).data('icon');
    $(`.${targetIcon}`).fadeIn();
  })
  .on('mouseleave', function() {
    // 鼠标离开时隐藏对应图标
    const targetIcon = $(this).data('icon');
    $(`.${targetIcon}`).hide();
  });

额外优化：按钮组离开时自动隐藏图标 #

如果希望鼠标完全离开按钮区域时自动隐藏所有图标，可以给按钮的父容器加个mouseleave事件，体验更流畅：

// 假设所有按钮都在id为donate-btn-group的容器内
$('#donate-btn-group').on('mouseleave', function() {
  allDonateIcons.hide();
});

为什么这更符合DRY原则？ #

• 没有重复的事件绑定代码，新增按钮时只需要在HTML里加class="donate-btn"和对应的data-icon，完全不用修改JS
• 统一处理图标显示逻辑，避免了重复的.fadeIn()和.hide()调用
• 提前缓存DOM元素，减少了浏览器的DOM查询次数，性能也更优

内容的提问来源于stack exchange，提问作者Tanner Mann