javascript - 我如何结合 JQuery 选择器和变量来缩短代码以便于扩展？

Question

我有一段正在运行的 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 颜色值。我计划继续添加更多这些内容，但认为这可能会以更紧凑或组合的方式编写出来，以允许添加更多项目，而无需每次都重复相同的三行代码。

我研究过数组，但无法找到确切的答案和语法来帮助解决这个问题。有任何想法吗？谢谢。

Answer 1

你可以把颜色变化的东西放在一个函数中，然后用你想要应用它的每个 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 具有“页脚”时选择它"类。