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。

Answer 2

只需向需要查看这些更改的元素添加一个公共类，并使用以下代码：

假设普通班级是'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 +'');
});

这可以解决您的代码缩短问题。

Answer 3

我会做这样的事情：

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部分。

此方法还可以减少函数调用次数，这可能会使其比其他解决方案更快。

如何组合JQuery选择器和变量来缩短代码以实现更轻松的可伸缩性？

3 个答案: