How can I combine JQuery selectors and variables to shorten code for easier scaleability?

I have this piece of javascript that is working.

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 +'');

It is checking two different divs for a colour and changing the css colour value with the returned colour from a jQuery colour plugin that I have. I plan 开发者_运维问答to continue to add more of these, but figured this could probably be written out in a more compact or combined way to allow for more items to be added without repeating the same three lines of code each time.

I have looked into arrays, but have been unable to find the exact answer and syntax to help with this. Any ideas? Thanks.

---

You can put the colour change stuff in a function and then call the function with each id (or selector) that you want to apply it to:

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");

If you used the latter options to update all at once you should probably loop through each item matching the selector and update them one by one (otherwise either it wouldn't work or they'd all end up with the same colour):

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 +'');
   });
}

Note: given that ID is supposed to be unique, you can select just on the id. so $("#one") instead of $("div#one.footer") - unless you want to select on that id only when it has the "footer" class.

---

Just add a common class to the elements which need to see these changes and use the following code:

Assuming common class is '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 +'');
});

This should solve shorten your code.

---

I would do something like this:

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");

This function takes an array of strings that must be valid jQuery selectors and a colorType which could be anything with color (I assume your plugin supports more than just background-color).

EDIT

Ooops, I had an incorrect variable name in there. It was $elem.css(colorType, color); but it should have been $elem.css(colorType, newColor);.

Anyway, this function gives you greater flexibility because you can change the color type in the function call. You would execute one function per array and just specify a color type. You could easily add another parameter for colorChange to handle the 'a', -0.5 part.

This method also results in fewer function calls which would likely make it faster than the other solutions here.