减少许多元素的 mouseenter/mouseleave 函数重复性

Question

我在页面上有一堆按钮，它们会触发一组特定的相应图像出现在按钮组下（页面上一次只会显示一张图像）。有没有办法让代码更干？

// Toggle donation icons on hover
$('#donate-btn1').on( 'mouseenter', function() {
    $('.icon-donate-50').fadeIn();
}).on('mouseleave', function() {
    $('.icon-donate-50').hide();
});

$('#donate-btn2').on( 'mouseenter', function() {
    $('.icon-donate-100').fadeIn();
}).on('mouseleave', function() {
    $('.icon-donate-100').hide();
});

$('#donate-btn3').on( 'mouseenter', function() {
    $('.icon-donate-200').fadeIn();
}).on('mouseleave', function() {
    $('.icon-donate-200').hide();
});

$('#donate-btn4').on( 'mouseenter', function() {
    $('.icon-donate-400').fadeIn();
}).on('mouseleave', function() {
    $('.icon-donate-400').hide();
});

$('#donate-btn5').on( 'mouseenter', function() {
    $('.icon-donate-750').fadeIn();
}).on('mouseleave', function() {
    $('.icon-donate-750').hide();
});

$('#donate-btn6').on( 'mouseenter', function() {
    $('.icon-donate-1000').fadeIn();
}).on('mouseleave', function() {
    $('.icon-donate-1000').hide();
});

Answer 1

如果您使用 class 而不是 id 并利用 html 数据属性，则可以保持干燥，如下所示：

    $('.donateButton')
    .on('mouseenter', function() 
    {
        let icon = $(this).attr('data-icon');
        $('.icon-donate-' + icon).fadeIn();
    })
    .on('mouseleave', function() 
    {
        let icon = $(this).attr('data-icon');
        $('.icon-donate-' + icon).hide();
    });

.icon-donate-50, .icon-donate-100{
  display: none;
  font-size: 18px;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="donateButton" data-icon="50">Donate 50</button>
<button class="donateButton" data-icon="100">Donate 100</button>

<span class='icon-donate-50'>50</span>
<span class='icon-donate-100'>100</span>

Answer 2

已接受答案的备选答案：

如果使用 ID 是不可协商的，或者您不允许 change/create classes，对于歇斯底里的葡萄干，您还可以在 ID 和 [=18= 上使用属性选择器] 属性：

$('button[id^="donate-btn"]').on( 'mouseenter', function() {
    $('[class*="icon-donate"]').fadeIn();
}).on('mouseleave', function() {
    $('[class*="icon-donate"]').hide();
});

我仍然建议尽可能使用 classes，但在某些情况下我就是这样。

减少许多元素的 mouseenter/mouseleave 函数重复性

Making mouseenter/mouseleave functions for many elements less repetitive

javascript

jquery

dry