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

Posted 2023-03-05

【中文标题】如何结合 JQuery 选择器和变量来缩短代码以便于扩展？

【英文标题】：How can I combine JQuery selectors and variables to shorten code for easier scaleability?

【发布时间】：2011-11-23 08:14:28

【问题描述】：

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

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

【问题讨论】：

鉴于这样的代码量 (uglyjs.net/2011/09/17/omg-jquery)，jQuery 应该考虑在内部缓存它们的选择器（可选重新验证）。

【参考方案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 具有“页脚”类时选择它。

【讨论】：

谢谢你 nnnnnn！这很完美，是的，它确实返回相同的颜色，除非匹配选择器。谢谢！

【参考方案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 +'');
);

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

【讨论】：

感谢 GeekTantra！这也有效！这个或 nnnn 的解决方案会是更“正确”的做事方式还是只是偏好？我只是出于学习目的而感到好奇。谢谢！

在我看来，这将是一种更好的方法，因为我们不直接使用额外的程序，从而使代码更短更精确。

【参考方案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/javascript 的新手，无法让它为我工作。我确定我可能遗漏了一些简单的东西（例如，不仅仅是复制和粘贴），但我无法真正按照代码进行诊断。但再次感谢您的回复！

@Darbis - 我做了一些修改。希望它现在更有意义。