1

Добрый вечер.

Есть вот такой массив объектов:

[
    {type: "sex", val: "boy"}, 
    {type: "sex", val: "girl"}, 
    {type: "age", from: "", to: 6}, 
    {type: "age", from: 6, to: 18}, 
    {type: "size", from: "", to: 35}, 
    {type: "size", from: 36, to: 55}
] (6)

Мне нужно вывести элементы DOM по нему (Где все значения из массива соответствуют значениям элемента). Сам элемент выглядит так:

<div class="filter-item" data-sex="girl" data-age="10" data-size="40">

Элементы в массиве могут добавляться или убавляться, значения тоже меняются.

На данный момент я сделал вывод по полу:

params.forEach( function( el, i ) {

    if( el.type == 'sex' ) {

        $( '.filter-item[data-'+el.type+'="'+el.val+'"]' ).show();

    }

} );

Дальше, если я делаю вывод по возрасту, то элементы перебивают друг друга и получаеться 'каша'.

Помогите составить алгоритм для вывода всех этих параметров.

2
  • 1
    На данный момент я сделал сортировку по полу: - а где сортировка? ты же просто показываешь все у которых тип sex
    – Grundy
    26 мар 2017 в 18:53
  • @Grundy видимо таки фильтрация имелась в виду, а не сортировка. Ибо даже критериев сортировки не приведено.
    – teran
    26 мар 2017 в 19:01

2 ответа 2

2

Берем в цикле каждый из элементов и проверяем его на соответствие установленному фильтру.
Проверить корректность работы фильтрации можно, комментируя некоторые из строк массива filterObj (у вас он настроен на "показывать всё)

var filterObj = [
    {type: "sex", val: "boy"}, 
    {type: "sex", val: "girl"}, 
    {type: "age", from: "", to: 6}, 
    {type: "age", from: 6, to: 18}, 
    {type: "size", from: "", to: 35}, 
    {type: "size", from: 36, to: 55}
];

// проверяем каждый из DOM-элементов на удовлетворение условиям
$('.filter-item').each(function() {
  // сборка данных элемента для удобства манипуляций
  var sex = $(this).data('sex');
  var age = +$(this).data('age'); // приводим к Number
  var size = +$(this).data('size');
  var checked = {sex:false, age: false, size: false}; // объект для записи данных проверок
  
  for(var i =0; i < filterObj.length; i++) {
    var fEl = filterObj[i]; // сокращение для элемента фильтра
    // совпадение по полу
    if(fEl.type == 'sex' && fEl.val == sex) {
      checked.sex = true;
    }
    // совпадение по возрасту
    if(fEl.type == 'age') {
      if(fEl.from == '') {
        fEl.from = 0; // фиксим диапазон
      }
      if(fEl.from <= age && fEl.to >= age) {
        checked.age = true;
      }
    }
    // совпадение по размеру
    if(fEl.type == 'size') {
      if(fEl.from == '') {
        fEl.from = 0;
      }
      if(fEl.from <= size && fEl.to >= size) {
        checked.size = true;
      }
    }
  }
  // выводим, если все ссовпадения сработали
  if(checked.sex && checked.age && checked.size) {
    $(this).show();
  }
});
.filter-item {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="filter-item" data-sex="boy" data-age="12" data-size="46">Мальчик, возраст 12, размер 46</div>
<div class="filter-item" data-sex="girl" data-age="1" data-size="43">Девочка, возраст 1, размер 43</div>
<div class="filter-item" data-sex="girl" data-age="8" data-size="40">Девочка, возраст 8, размер 40</div>
<div class="filter-item" data-sex="girl" data-age="1" data-size="2">Девочка, возраст 1, размер 2</div>
<div class="filter-item" data-sex="girl" data-age="2" data-size="16">Девочка, возраст 2, размер 16</div>
<div class="filter-item" data-sex="girl" data-age="15" data-size="28">Девочка, возраст 15, размер 28</div>
<div class="filter-item" data-sex="boy" data-age="13" data-size="48">Мальчик, возраст 13, размер 48</div>
<div class="filter-item" data-sex="boy" data-age="5" data-size="54">Мальчик, возраст 5, размер 54</div>
<div class="filter-item" data-sex="girl" data-age="4" data-size="10">Девочка, возраст 4, размер 10</div>
<div class="filter-item" data-sex="girl" data-age="4" data-size="19">Девочка, возраст 4, размер 19</div>
<div class="filter-item" data-sex="girl" data-age="7" data-size="24">Девочка, возраст 7, размер 24</div>
<div class="filter-item" data-sex="boy" data-age="15" data-size="15">Мальчик, возраст 15, размер 15</div>
<div class="filter-item" data-sex="girl" data-age="5" data-size="32">Девочка, возраст 5, размер 32</div>
<div class="filter-item" data-sex="girl" data-age="13" data-size="48">Девочка, возраст 13, размер 48</div>
<div class="filter-item" data-sex="girl" data-age="14" data-size="28">Девочка, возраст 14, размер 28</div>
<div class="filter-item" data-sex="girl" data-age="15" data-size="11">Девочка, возраст 15, размер 11</div>
<div class="filter-item" data-sex="boy" data-age="8" data-size="9">Мальчик, возраст 8, размер 9</div>
<div class="filter-item" data-sex="boy" data-age="16" data-size="7">Мальчик, возраст 16, размер 7</div>
<div class="filter-item" data-sex="boy" data-age="10" data-size="9">Мальчик, возраст 10, размер 9</div>
<div class="filter-item" data-sex="girl" data-age="16" data-size="29">Девочка, возраст 16, размер 29</div>

2
  • Благодарю. Я не указал выше, нужно что-бы даже по одному параметру была фильтрация. Т.е. можно указать только ПОЛ, без возраста и размера и фильтр должен работать. 26 мар 2017 в 21:31
  • Тогда вам предварительно нужно проверять filterObj и на основании его формировать checked
    – br3t
    27 мар 2017 в 8:34
2

Для фильтрации от одного параметра (метод выше работает при включенных всех параметрах) немного дополнил код:

function someFilter() {

    $( '.filter-item' ).hide();

    if( params.length ) {

        $( '.filter-item' ).each( function() {

            let sex     = $(this).data('sex'),
                age     = +$(this).data('age'),
                size    = +$(this).data('size'),
                checked = { sex: false, age: false, size: false },
                clicked = { sex: true, age: true, size: true };

            params.forEach( function( fEl, i ) {

                if( fEl.type == 'sex' ) { clicked.sex = false;

                    if( fEl.val == sex )
                        checked.sex = true;
                }

                if( fEl.type == 'age' ) { clicked.age = false;

                    fEl.from = fEl.from != ''? fEl.from: 0;

                    if( fEl.from <= age && fEl.to >= age )
                        checked.age = true;

                }

                if( fEl.type == 'size' ) { clicked.size = false;

                    fEl.from = fEl.from != ''? fEl.from: 0;

                    if( fEl.from <= size && fEl.to >= size )
                        checked.size = true;
                }

            } );

            if( ( checked.sex || clicked.sex ) && ( checked.age || clicked.age ) && ( checked.size || clicked.size ) )
                $(this).show();

        });

    }

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.