Совет: сортируемые пользователем списки с Flexbox и jQuery

В качестве первого шага мы расширяем объект-прототип jQuery ( $.fn ), добавляя к numericFlexboxSorting метод numericFlexboxSorting :

 $.fn.numericFlexboxSorting = function() { const $select = this; // do stuff here return $select; }; 

В этом методе ключевое слово this ссылается на наш элемент <select> . Как только мы создадим плагин, мы должны вернуть этот элемент. Если мы этого не сделаем, цепочка методов не будет работать.

Рассмотрим этот код, например:

 $(".b-select").numericFlexboxSorting().css("background", "red"); 

Здесь, если мы не вернем целевой элемент, метод css ничего не сделает.

Как мы уже упоминали, плагин будет сортировать элементы по классу .boxes li по умолчанию. Однако мы должны иметь возможность переопределить это поведение, если захотим. Для этого мы используем метод расширения jQuery:

 $.fn.numericFlexboxSorting = function(options) { const settings = $.extend({ elToSort: ".boxes li" }, options); // do stuff here }; 

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

 $.fn.numericFlexboxSorting = function(options) { const ascOrder = (a, b) => a - b; const descOrder = (a, b) => b - a; // do stuff here }; 

Как только пользователь выбирает параметр (кроме первого) из раскрывающегося списка, мы должны извлечь и оценить его значение. Для этого мы используем событие change :

 $.fn.numericFlexboxSorting = function(options) { const $select = this; $select.on("change", () => { const selectedOption = $select.find("option:selected").attr("data-sort"); sortColumns(settings.elToSort, selectedOption); }); // do stuff here }; 

Внутри обработчика событий мы делаем две вещи:

1. Получить значение атрибута data-sort для выбранного параметра (например, price:asc ).
2. Вызовите функцию sortColumns .

Функция sortColumns принимает два параметра:

1. Элементы, которые мы хотим отсортировать.
2. Значение атрибута data-sort для выбранной опции.

Вот тело этой функции:

 function sortColumns(el, opt) { const attr = "data-" + opt.split(":")[0]; const sortMethod = (opt.includes("asc")) ? ascOrder : descOrder; const sign = (opt.includes("asc")) ? "" : "-"; // 1 const sortArray = $(el).map((i, el) => $(el).attr(attr)).sort(sortMethod); // 2 for (let i = 0; i < sortArray.length; i++) { $(el).filter(`[${attr}="${sortArray[i]}"]`).css("order", sign + sortArray[i]); } } 

Давайте объясним, что происходит внутри:

1. В зависимости от атрибута, который пользователь хочет отсортировать (например, price или length ), мы получаем значение соответствующего data-* attribute для каждого целевого элемента и сохраняем его в массиве. Кроме того, в зависимости от того, как пользователь хочет отсортировать целевые элементы, мы сортируем массив в порядке возрастания или убывания.

2. Мы перебираем массив, находим связанные элементы и присваиваем им значение свойства order (положительное или отрицательное), которое определяется значением их соответствующего data-* attribute .
   Так, например, если пользователь выбирает опцию price:asc , элемент с data-price: 315 получает order: 315 .

   

   С другой стороны, если пользователь выбирает опцию price:desc , он получает order: -315 .

   

Наконец, чтобы предотвратить возможные конфликты с другими библиотеками, которые используют переменную $ , мы заключаем наш код в немедленно вызванное выражение функции, например:

 (function($) { $.fn.numericFlexboxSorting = function(options) { // do stuff here }; })(jQuery); 

Наш плагин готов. Вы можете увидеть его вживую в следующей демонстрации Codepen: