Question

页面上有一堆按钮会触发特定的相应图像显示在按钮组下面（一次只能在页面上显示1个图像）。有没有办法让代码更干？

data have;
input val1;
val2=  input(prxchange('s/^(.*)(\d{2})$/$2/', -1, trim(put(val1,8.))),best.);
format val2 z2.;
datalines;
1234
237
754
9000
40
;

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是不可协商的，或者您不允许更改/创建类，对于歇斯底里的葡萄干，您还可以在id和class属性上使用属性选择器：

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

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

使mouseenter / mouseleave函数对于许多元素重复性较低

2 个答案: