CODEWITHSUNDEEP
javascriptjqueryfunction
DrewP84
DrewP84

Reputation: 383

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

I have 3 (and soon more) functions that each do the exact same thing, but control different enumerated divs/variables depending on which div the mousewheel event is triggered over. I'm curious if there are any tricks to compact these very similar dumb functions into one smart function. Each div needs its own #bigwrapperN , #wrapperN, opacityN, and 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+")");
    }
});

Upvotes: 0

Views: 78

Answers (4)

DrewP84
DrewP84

Reputation: 383

This solution worked: Thanks @Unknown - you provided the core of the answer, so I'll accept yours.

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

Upvotes: 1

Zholen
Zholen

Reputation: 1790

you could also store the opacity and colorcounter information in the data() of the bigwrapper

$('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);

});

Upvotes: 1

Kiran
Kiran

Reputation: 20313

Use 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]+")");
}
});

Upvotes: 3

Paolo Casciello
Paolo Casciello

Reputation: 8202

The selectors works like in CSS so you can use:

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

But for this type of tasks it's always preferred to use classes:

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

This way you can use classes also for the inner wrappers:

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

Upvotes: 1

Related Questions