javascript - 精简JavaScript

我总是发现自己一遍又一遍地复制并粘贴相同的功能。我很难理解如何编写更灵活的代码。

$(document).on('mouseenter mouseleave','#claps10',function () {
    "use strict";
    if ($(window).width() > 800) {
        $('.inco10').stop().animate({width: 'toggle', height: '125px'});
    }
});

$(document).on('mouseenter mouseleave','#claps11',function () {
    "use strict";
    if ($(window).width() > 800) {
        $('.inco11').stop().animate({width: 'toggle', height: '125px'});
    }
});

当我知道有一种更好的方法来拥有一个时，我就有11个。我只是不够熟练，无法做到这一点。您怎么称呼它？您可以向我展示如何完成此操作的示例吗？

最佳答案

使用claps选择器获取所有以[id^=claps]开头的id的元素，然后使用$(this)获取目标元素的id（例如claps11），使用claps从id中删除$(this).attr("id").replace("claps", "")以获取数字（11）然后将其与类连接。

  $(document).on('mouseenter mouseleave','[id^=claps]',function () {
        "use strict";

        var idNumber = $(this).attr("id").replace("claps", "");
        if ($(window).width() > 800) {
            $('.inco'+idNumber).stop().animate({width: 'toggle', height: '125px'});
        }
    });