是否可以将这些类似的功能合并为一个函数

Is it possible to merge these similar functions into one function?

本文关键字:合并 函数 一个 功能 是否      更新时间:2023-09-26

我有 3 个(很快就会有更多(函数,每个函数都做完全相同的事情,但根据触发鼠标滚轮事件的div 来控制不同的枚举div/变量。 我很好奇是否有任何技巧可以将这些非常相似的哑函数压缩到一个智能函数中。 每个div都需要自己的#bigwrapperN#wrapperNopacityNcolorcounterN

$('#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+")");
    }
});

使用 Attribute Starts with Selector. try:

$('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]+")");
}
});

选择器的工作方式与在 CSS 中类似,因此您可以使用:

$('#bigwrapper1, #bigwrapper2, #bigwrapper3').mousewheel( ... 

但是对于这种类型的任务,总是首选使用类:

$('.someClass').mousewheel( ... 

这样,您也可以将类用于内部包装器:

$(this).filter('.wrapper').css(...

您还可以将不透明度和颜色计数器信息存储在 bigwrapper 的 data(( 中

$('div[id^=bigwrapper]').mousewheel(function(event, delta, deltaX, deltaY) {
    var data = $(this).data(), background;
    data.opacity += (delta > 0 ? .05 : delta < 0 ? -.05 : 0);
    background = "rgba("+colors[data.colorcounter]+","+data.opacity+")";
    //$(this).find('div[id^=wrapper]')
    $(this).find('.wrapper').css('background', background);
});

这个解决方案奏效了: 谢谢@Unknown - 你提供了答案的核心,所以我会接受你的。

$('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]+")");
    }
});