javascript - 是否可以将这些相似的功能合并为一个功能？

Question

我有 3 个(很快还会有更多)函数，每个函数都执行完全相同的操作，但根据触发鼠标滚轮事件的 div 来控制不同的枚举 div/变量。我很好奇是否有任何技巧可以将这些非常相似的愚蠢函数压缩为一个智能函数。每个 div 都需要自己的 #bigwrapperN 、 #wrapperN、opacityN 和 colorcounterN。

$('#bigwrapper1').mousewheel(function(event, delta, deltaX, deltaY) {
    if (delta > 0) {
        opacity1 = opacity1 + .05;
        $('#wrapper1').css('background', "rgba("+colors[colorcounter1]+","+opacity1+")");
    } else if (delta < 0) {
        opacity1 = opacity1 - .05;
        $('#wrapper1').css('background',"rgba("+colors[colorcounter1]+","+opacity1+")");
    }
});

$('#bigwrapper2').mousewheel(function(event, delta, deltaX, deltaY) {
    if (delta > 0) {
        opacity2 = opacity2 + .05;
        $('#wrapper2').css('background', "rgba("+colors[colorcounter2]+","+opacity2+")");
    } else if (delta < 0) {
        opacity2 = opacity2 - .05;
        $('#wrapper2').css('background', "rgba("+colors[colorcounter2]+","+opacity2+")");
    }
});

$('#bigwrapper3').mousewheel(function(event, delta, deltaX, deltaY) {
    if (delta > 0) {
        opacity3 = opacity3 + .05;
        $('#wrapper3').css('background', "rgba("+colors[colorcounter3]+","+opacity3+")");
    } else if (delta < 0) {
        opacity3 = opacity3 - .05;
        $('#wrapper3').css('background', "rgba("+colors[colorcounter3]+","+opacity3+")");
    }
});

Answer 1

使用Attribute Starts with Selector.尝试:

$('div[id^=bigwrapper]').mousewheel(function(event, delta, deltaX, deltaY) {
    var i = $(this).attr("id").split("bigwrapper")[1];
    if (delta > 0) {
   opacity[i] = opacity[i] + .05;       
    $('div[id="wrapper'+i+'"]').css('background', "rgba("+eval('colors[colorcounter'+i+']')+","+opacity[i]+")");
} else if (delta < 0) {
    opacity[i] = opacity[i] - .05;
    $('div[id="wrapper'+i+'"]').css('background', "rgba("+eval('colors[colorcounter'+i+']')+","+opacity[i]+")");
}
});