是否可以将这些类似的功能合并为一个函数
Is it possible to merge these similar functions into one function?
我有 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+")");
}
});
使用 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]+")");
}
});
相关文章:
- JQuery合并了keyup和focusout两个函数
- DataTables合并了两个独立表中的jQuery/Javascript函数
- jQuery将代码合并为一个函数
- 将3个函数合并在一起
- 将多个jquery函数合并为一个
- 如何使用ES6将两个具有函数的对象合并为一个新对象
- 将两个云代码函数合并为一个函数
- 有没有一个lodash函数可以合并两个对象并删除其中一个对象的属性(如果它们没有)'不存在于另一个中
- javascript中是否存在可以合并多个对象的函数或方法
- 我有一个用于 onclick 的窗口加载函数 如何添加 onblur 事件并合并为一个
- 如何在 CouchDB 中将对象属性从 reduce 合并到重新归约函数
- 在Rereduce函数中合并对象的属性会导致每次创建视图时产生错误的值
- 使用 Object.create() 将函数与原型上的属性合并
- 防止自定义 jquery 函数在同时运行时合并联接
- 洛达什 _.合并函数问题
- 如何在函数中合并函数
- 合并函数接口,扩展函数原型
- 这个对象合并函数中可能出现的错误是什么?
- jQuery合并函数中的if条件令人困惑
- 我正在尝试创建“合并函数”.通过编写回调来工作