Можно ли объединить эти подобные функции в одну функцию?

У меня есть 3 (и более скоро) функции, которые каждый делает то же самое, но управляют разными перечисляемыми div/переменными, в зависимости от которых div запускается событие mousewheel. Мне любопытно, есть ли какие-либо трюки, чтобы сжать эти очень похожие немые функции в одну интеллектуальную функцию. Каждый дивизион нуждается в собственных #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+")"); 
    } 
});

источник

2013-10-07 DrewP84

Использование 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]+")"); 
} 
});

источник

2013-10-07 17:22:53 Unknown

Это выглядит хорошо. Я проверю это. – DrewP84

Похоже, мне нужно использовать 'eval()' для создания имен динамических переменных, поскольку приведенный выше код не работает. Т.е., 'eval ('opacity' + i)' вместо 'opacity + 'i'' – DrewP84

@ DrewP84 Я не думаю, что нам нужно eval(). можете ли вы разместить свой код в [скрипке] (http://jsfiddle.net)? – Unknown

Селекторы работает как в CSS, так что вы можете использовать:

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

Но для этого типа задач, которые он всегда предпочитал использовать классы:

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

Таким образом, вы можете использовать классы также для внутренних оберток:

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

источник

2013-10-07 17:19:30

Правда, но '$ ('DIV [ID = "bigwrapper"]'). MouseWheel (' будет более эффективным. Тем не менее, то, что об изменении уникальных имен из '# wrapperN',' opacityN' и 'colorcounterN' внутри функции? – DrewP84

@ Производительность DrewP84 функции, называемой только в начале, не является такой проблемой, если у вас нет нескольких мегабайт DOM для перемещения. Я обновил для внутренних оберток –

вы также можете сохранить прозрачность и colorcounter информации в данных() из 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); 

});

источник

2013-10-07 17:21:10 Zholen

изменяя уникальные имена '# wrapperN',' opacityN' и 'colorcounterN' внутри функции? Это не относится к этому. – DrewP84

Ah Согласен, я думал, что различия были как раз например. – Zholen

Спасибо, это полезная альтернатива. – DrewP84

Это решение работает: Спасибо @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-07 17:55:48 DrewP84

Можно ли объединить эти подобные функции в одну функцию?

ответ

Смежные вопросы