[英]How can I combine JQuery selectors and variables to shorten code for easier scaleability?
我有这个javascript正在运行。
var footerColour = $.color.extract($("div#one.footer"), 'background-color');
var newrgba = $.color.parse(footerColour).add('a', -0.5).toString()
$("div#one.footer").css("background-color", ''+ newrgba +'');
var navColour = $.color.extract($("div#two.nav"), 'background-color');
var newrgba1 = $.color.parse(navColour).add('a', -0.5).toString()
$("div#two.nav").css("background-color", ''+ newrgba1 +'');
它正在检查两个不同的div用于颜色,并使用我所拥有的jQuery颜色插件返回的颜色更改css颜色值。 我计划继续添加更多这些,但想到这可能会以更紧凑或组合的方式写出,以允许添加更多项目,而无需每次重复相同的三行代码。
我已经研究过数组,但是无法找到确切的答案和语法来帮助解决这个问题。 有任何想法吗? 谢谢。
您可以将颜色更改内容放入函数中,然后使用要将其应用于的每个id(或选择器)调用该函数:
function changeBackground(selector) {
var footerColour = $.color.extract($(selector), 'background-color');
var newrgba = $.color.parse(footerColour).add('a', -0.5).toString();
$(selector).css("background-color", ''+ newrgba +'');
}
changeBackground("div#one.footer");
changeBackground("div#two.nav");
changeBackground("add other item here");
// or pass them all at once
changeBackground("div#one.footer, div#two.nav, etc");
// or give them all a common class and pass that
changeBackground(".someCommonClass");
如果您使用后面的选项一次更新所有选项,您可能应该循环遍历与选择器匹配的每个项目并逐个更新它们(否则它将无效或者它们都以相同的颜色结束):
function changeBackground(selector) {
$(selector).each(function() {
var footerColour = $.color.extract($(this), 'background-color');
var newrgba = $.color.parse(footerColour).add('a', -0.5).toString();
$(this).css("background-color", ''+ newrgba +'');
});
}
注意:鉴于ID应该是唯一的,您可以只选择ID。 所以$("#one")
而不是$("div#one.footer")
- 除非你想只在它有“页脚”类时选择那个id。
只需向需要查看这些更改的元素添加一个公共类,并使用以下代码:
假设普通班级是'changeBG'
jQuery('.changeBG').each(function() {
var navColor = jQuery.color.extract(jQuery(this), 'background-color');
var newRGBA = jQuery.color.parse(navColor).add('a', -0.5).toString();
jQuery(this).css("background-color", ''+ newRGBA +'');
});
这应该可以解决您的代码缩短问题。
我会做这样的事情:
function changeColor(arr, colorType){
// Define length of array
var i = arr.length;
// Loop over each item in array
while(i--){
// Create jQuery object with element from array
var $elem = $( arr[i] );
// Run the color change logic
var color = $.color.extract($elem, colorType);
var newColor = $.color.parse(color).add('a', -0.5).toString();
$elem.css(colorType, newColor);
}
}
// Array of jQuery selectors
var elems = ["div#one.footer","div#two.nav"];
// Pass array and color type to changeColor function
changeColor(elems, "background-color");
这个函数接受一个必须是有效jQuery选择器的字符串数组和一个可以是任何颜色的colorType
(我假设你的插件支持的不仅仅是background-color
)。
编辑
哎呀,我的变量名称不正确。 它是$elem.css(colorType, color);
但它应该是$elem.css(colorType, newColor);
。
无论如何,此功能为您提供了更大的灵活性,因为您可以更改函数调用中的颜色类型。 您将为每个数组执行一个函数,并只指定颜色类型。 您可以轻松地为colorChange
添加另一个参数来处理'a', -0.5
部分。
此方法还可以减少函数调用,这可能使其比其他解决方案更快。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.