0

我有 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+")");
    }
});
4

4 回答 4

3

使用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]+")");
}
});
于 2013-10-07T17:22:53.037 回答
1

选择器的工作方式与 CSS 类似，因此您可以使用：

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

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

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

这样，您也可以将类用于内部包装器：

$(this).filter('.wrapper').css(...
于 2013-10-07T17:19:30.427 回答
1

您还可以将不透明度和颜色计数器信息存储在 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);

});
于 2013-10-07T17:21:10.197 回答
1

这个解决方案有效：谢谢@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]+")");
    }
});
于 2013-10-07T17:55:48.617 回答