Как можно объединить селекторы 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 для изменения цвета и изменяет значение цвета css на возвращенный цвет из цветового плагина jQuery, который у меня есть. Я планирую продолжать добавлять больше из них, но решил, что это, вероятно, можно записать более компактным или комбинированным способом, чтобы можно было добавлять больше элементов без повторения одних и тех же трех строк кода каждый раз.

Я изучил массивы, но не смог найти точный ответ и синтаксис, чтобы помочь с этим. Есть идеи? Спасибо.

Answer 1

Вы можете поместить функцию изменения цвета в функцию, а затем вызвать функцию с каждым идентификатором (или селектором), к которому вы хотите применить ее:

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

Если вы использовали последние опции для обновлениявнезапно вам, вероятно, следует пройтись по каждому элементу, соответствующему селектору, и обновить их один за другим (в противном случае либо он не будет работать, либо все они в конечном итоге будут одного цвета):: учитывая, что идентификатор должен быть уникальным, вы можете выбрать только по идентификатору.поэтому $("#one") вместо $("div#one.footer") - если вы не хотите выбирать этот идентификатор только тогда, когда он имеет класс "нижний колонтитул".

Answer 2

Я бы сделал что-то вроде этого:

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).

EDIT

Упс, у меня там было неверное имя переменной. Это был $elem.css(colorType, color);, но это должно было быть $elem.css(colorType, newColor);.

В любом случае, эта функция дает вам большую гибкость, поскольку вы можете изменить тип цвета при вызове функции. Вы должны выполнить одну функцию для каждого массива и просто указать тип цвета. Вы можете легко добавить другой параметр для colorChange для обработки части 'a', -0.5.

Этот метод также приводит к меньшему количеству вызовов функций, что, вероятно, сделает его быстрее, чем другие решения здесь.

Answer 3

Просто добавьте общий класс к элементам, которые должны видеть эти изменения, и используйте следующий код:

Предполагая, что общий класс '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 +'');
});

Это должно помочь сократить ваш код.