2

Есть такой небольшой фильтр:

var filterAll = $('.filter-all'),
    boxs = $('.box'),
    length = boxs.length;
filterAll.text(length);

// Checkbox
$('input:checkbox').on('change', function() { 
  
   var 
     filter = new RegExp($(":checkbox:checked")
                         .map(function() {
                           return this.value;
                         })
                         .get()
                         .join("|") );

  //console.log(filter);
  
  $(".box").each(function() {
    var $this = $(this);
    $this[filter.source != "" && filter.test($this.attr("class")) ? "show" : "hide"]();
        
  });        
});

// Range Slider
var range = document.getElementById('range'),
    t = [],
    maximum = parseInt(range.attributes.max.value, 10),
    minimum = parseInt(range.attributes.min.value, 10),
    delta = (maximum - minimum) / 4,
    options = {
      min: [minimum],
      "25%": [minimum + delta * 1, 1e6],
      "50%": [minimum + delta * 2, 1e6],
      "75%": [minimum + delta * 3, 1e6],
      max: [maximum]
    };

//console.log(minimum + delta * 1, 1e6);

t.push(parseInt(range.attributes.min.value, 10)), 
  t.push(parseInt(range.attributes.max.value, 10));
var n = parseInt(range.attributes.max.value, 10); 
// i = parseInt(range.attributes.min.value, 10),

noUiSlider.create(
  range, 
  {
    range: options,
    start: t,
    connect: !0,
    pips: {
      mode: "range",
      density: 2
    }
  }
);

$(".noUi-value-horizontal").each(function() {
  var range = $(this).text().split("").slice(0, -6).join("");
  $(this).html(range);
});


range.noUiSlider.on('change', function(values, handle){
  $(".box").each(function() {
    var $this = $(this);
        price = $this.data('price');
    
    var val1 =  values[0];
    var val2 =  values[1];
    
    if(price <= val2 && price >= val1 ) {
      $this.show();
    }else {
      $this.hide();
    }
    
  });
});


//   var filterSelect = $('.filter-select'),
//     boxs = $('.box'),
//     length = boxs.length;
//     filterSelect.text(length);
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* input[type="checkbox"] {
  display: none;
} */

li {
  display: inline-block;
}

.filter-item {
    border: 4px solid #ccc;
    margin: .1rem;
    padding: .5rem .95rem;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}


input[type="checkbox"]:checked+label,
.filter-item.active, 
.filter-item:hover, 
.filter-item:not(.active):hover {
    background: #333;
    color: #fff;
}

.slider-wrapper {
  margin-top: 1rem;
  margin-bottom: 3rem;
  padding: 0 1rem;
}

.filter-res {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 1rem;
}

.filter-res span {
  color: red;
}

.box {
  width: 8rem;
  height: 8rem;
  background: #ccc;
  margin: 1rem;
  padding: 3rem 0;
  display: inline-block;
  text-align: center;
  font-family: monospace;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
  
  
<div class="filter">
  Кол-во комнат
  <ul class="list">
    <li class="item">
      <input type="checkbox" id="room-1" value="room-1">
      <label for="room-1" class="filter-item" >
        1        
      </label>
    </li>
    <li class="item">
      <input type="checkbox" id="room-2" value="room-2">
      <label for="room-2" class="filter-item" >
        2        
      </label>
    </li>
    <li class="item">
      <input type="checkbox" id="room-3" value="room-3">
      <label for="room-3" class="filter-item" >
        3        
      </label>
    </li>
  </ul>
  <br>
  
  Метраж
  <ul class="list">
    <li class="item">      
      <input type="checkbox" id="area-1" value="area-1">
      <label for="area-1" class="filter-item" >
        50-100        
      </label>
    </li>
    <li class="item">
      <input type="checkbox" id="area-2" value="area-2">
      <label for="area-2" class="filter-item" >
        100-200        
      </label>
    </li>
  </ul>
  
  <br>
  
  Цена
  <div class="slider-wrapper">
    <div id="range" max="28420000" min="6130000"></div>
  </div>
  
  <br>
  <div class="filter-res">
    Выбрано <span class="filter-slect">0</span> из <span class="filter-all">0</span> 
  </div>
  
</div>
  
  <div class="content">
    <div class="box room-1 area-1" data-price="6140000">
      room="1" <br> area="70" <br> 6 140 000
    </div>
    
    <div class="box room-2 area-2" data-price="17000000">
      room="2" <br> area="70" <br> 17 000 000
    </div>
    
    <div class="box room-3 area-3" data-price="27000000">
      room="3" <br> area="70" <br> 27 000 000
    </div>
  </div>

Range Slider - noUiSlider

По чекбоксам работает все, но вот со слайдером загвоздка.

Смысл в том, что при перемещении ползунка, только попавшие в диапозон цены товары отображались (с учетом чекбоксов) и результат фильтра (количество отображенных товаров) записывались в .filter-select.

Сейчас, выбираю диапозон цены, потом выбираю кол-во комнат (чекбокс) - все работает, потом убираю выбор комнаты (снимаю чекбокс) и все сбрасывается.

Вопрос: Как реализовать фильтр товаров по range слайдеру с учетом чекбоксов и записать количество всех выведенных результатов?

1
  • Вам нужно сначала собрать все данные а потом проверять их при событиях 4 дек 2017 в 20:40

1 ответ 1

2

Если правильно понял то что то типо того?

var filterAll = $('.filter-all'),
    boxs = $('.box'),
    length = boxs.length;
filterAll.text(length);  
var count_box;

var filter =   filter = new RegExp($(":checkbox:checked")
                         .map(function() {
                           return this.value;
                         }).get().join("|") );
                         
$('input:checkbox').on('load change', function() {

  
  
  filter = new RegExp($(":checkbox:checked")
                         .map(function() {
                           return this.value;
                         }).get().join("|") );
  
  $(".box").each(function() {
    var $this = $(this); 
    
    if(filter.test($this.attr("class")) ) {  
        $this.show();  
    }else{
       $this.hide();   
    } 
    if(filter.source == ""){
       $this["show"]; 
    }
  });    
  
   var values = [];
 values[0] = $(".noUi-handle.noUi-handle-lower").attr("aria-valuetext");
 values[1] = $(".noUi-handle.noUi-handle-upper").attr("aria-valuetext"); 
  range_change( values  );  
  
  count_box();  
});

// Range Slider
var range = document.getElementById('range'),
    t = [],
    maximum = parseInt(range.attributes.max.value, 10),
    minimum = parseInt(range.attributes.min.value, 10),
    delta = (maximum - minimum) / 4,
    options = {
      min: [minimum],
      "25%": [minimum + delta * 1, 1e6],
      "50%": [minimum + delta * 2, 1e6],
      "75%": [minimum + delta * 3, 1e6],
      max: [maximum]
    };

//console.log(minimum + delta * 1, 1e6);

t.push(parseInt(range.attributes.min.value, 10)), 
  t.push(parseInt(range.attributes.max.value, 10));
var n = parseInt(range.attributes.max.value, 10); 
// i = parseInt(range.attributes.min.value, 10),

noUiSlider.create(
  range, 
  {
    range: options,
    start: t,
    connect: !0,
    pips: {
      mode: "range",
      density: 2
    }
  }
);

$(".noUi-value-horizontal").each(function() {
  var range = $(this).text().split("").slice(0, -6).join("");
  $(this).html(range);
});

function range_change(values, handle){ 
 $(".box").each(function() {
    var $this = $(this);
        price = $this.data('price');
    
    var val1 =  values[0];
    var val2 =  values[1]; 
     
     
    if(price <= val2 && price >= val1 && filter.test($this.attr("class")) ) {
      $this.show();
    }else {
      $this.hide();
    } 
    
  }); 
}
range.noUiSlider.on('change', function(values, handle){ 
 range_change(values, handle); 
 count_box(); 
});

function count_box() {
   countbox = $('.content').find(".box:visible").length; 
   $(".filter-slect").text(countbox);
}

//   var filterSelect = $('.filter-select'),
//     boxs = $('.box'),
//     length = boxs.length;
//     filterSelect.text(length);
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* input[type="checkbox"] {
  display: none;
} */

li {
  display: inline-block;
}

.filter-item {
    border: 4px solid #ccc;
    margin: .1rem;
    padding: .5rem .95rem;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}


input[type="checkbox"]:checked+label,
.filter-item.active, 
.filter-item:hover, 
.filter-item:not(.active):hover {
    background: #333;
    color: #fff;
}

.slider-wrapper {
  margin-top: 1rem;
  margin-bottom: 3rem;
  padding: 0 1rem;
}

.filter-res {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 1rem;
}

.filter-res span {
  color: red;
}

.box {
  width: 8rem;
  height: 8rem;
  background: #ccc;
  margin: 1rem;
  padding: 3rem 0;
  display: inline-block;
  text-align: center;
  font-family: monospace;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
  
  
<div class="filter">
  Кол-во комнат
  <ul class="list">
    <li class="item">
      <input type="checkbox" id="room-1" value="room-1">
      <label for="room-1" class="filter-item" >
        1        
      </label>
    </li>
    <li class="item">
      <input type="checkbox" id="room-2" value="room-2">
      <label for="room-2" class="filter-item" >
        2        
      </label>
    </li>
    <li class="item">
      <input type="checkbox" id="room-3" value="room-3">
      <label for="room-3" class="filter-item" >
        3        
      </label>
    </li>
  </ul>
  <br>
  
  Метраж
  <ul class="list">
    <li class="item">      
      <input type="checkbox" id="area-1" value="area-1">
      <label for="area-1" class="filter-item" >
        50-100        
      </label>
    </li>
    <li class="item">
      <input type="checkbox" id="area-2" value="area-2">
      <label for="area-2" class="filter-item" >
        100-200        
      </label>
    </li>
  </ul>
  
  <br>
  
  Цена
  <div class="slider-wrapper">
    <div id="range" max="28420000" min="6130000"></div>
  </div>
  
  <br>
  <div class="filter-res">
    Выбрано <span class="filter-slect">0</span> из <span class="filter-all">0</span> 
  </div>
  
</div>
  
  <div class="content">
    <div class="box room-1 area-1" data-price="6140000">
      room="1" <br> area="70" <br> 6 140 000
    </div>
    
    <div class="box room-2 area-2" data-price="17000000">
      room="2" <br> area="70" <br> 17 000 000
    </div>
    
    <div class="box room-3 area-3" data-price="27000000">
      room="3" <br> area="70" <br> 27 000 000
    </div>
  </div>

2
  • @HamSter обновил ответ 4 дек 2017 в 22:02
  • Спасибо огромное!!!
    – SVE
    5 дек 2017 в 6:00

Ваш ответ

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

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