[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: В фильтре объединить кнопки и списки
Ivan707
Добрый день!

Есть фильтр на основе Isotope. В нем мне необходимо добавить выпадающий список со значениями. По отдельности, все отлично работает, а объединить все вместе не получается.

Исходный скрипт фильтра:

// External js: jquery, isotope.pkgd.js, bootstrap.min.js, bootstrap-slider.js
$(document).ready( function() {

var buttonFilters = {};
var buttonFilter = '*';
var rangeFilters = {
'height': {'min':150, 'max': 185},
'weight': {'min':50, 'max': 90}
}
;

// Initialise Isotope
var $grid = $('.grid').isotope({
itemSelector: '.item',
layout: 'masonry',
filter: function() {
var $this = $(this);
var height = $this.attr('data-height');
var weight = $this.attr('data-weight');
var isInHeightRange = (rangeFilters['height'].min <= height && rangeFilters['height'].max >= height);
var isInWeightRange = (rangeFilters['weight'].min <= weight && rangeFilters['weight'].max >= weight);
return $this.is( buttonFilter ) && (isInHeightRange && isInWeightRange);
}
}
);

// Initialise Sliders
var $heightSlider = $('#filter-height').slider({ tooltip_split: true, min: 130, max: 220, range: true, value: [150, 180] });
var $weightSlider = $('#filter-weight').slider({ tooltip_split: true, min: 40, max: 150, range: true, value: [50, 90] });

function updateRangeSlider(slider, slideEvt) {
console.log('Current slider:' + slider);
var sldmin = +slideEvt.value[0],
sldmax = +slideEvt.value[1],
filterGroup = slider.attr('data-filter-group'),
currentSelection = sldmin + ' - ' + sldmax;

slider.siblings('.filter-label').find('.filter-selection').text(currentSelection);

console.log('Filtergroup: '+ filterGroup);
rangeFilters[filterGroup] = {
min: sldmin || 0,
max: sldmax || 100000
};
$grid.isotope();
}

$heightSlider.on('slideStop', function(slideEvt){
var $this =$(this);
updateRangeSlider($this, slideEvt);
});
$weightSlider.on('slideStop', function(slideEvt){
var $this =$(this);
updateRangeSlider($this, slideEvt);
});

$('.filters').on( 'click', '.btn', function() {
var $this = $(this);
var $buttonGroup = $this.parents('.btn-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
buttonFilters[ filterGroup ] = $this.attr('data-filter');
buttonFilter = concatValues( buttonFilters ) || '*';
console.log( buttonFilter )
$grid.isotope();
});

$('.btn-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', '.btn-filter', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
});

function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}

Скрипт который необходимо добавить

var buttonFilters = {};

$('.filters').on( 'change', function( event ) {
var $select = $( event.target );
// get group key
var filterGroup = $select.attr('data-filter-group');
// set filter for group
buttonFilters[ filterGroup ] = event.target.value;
// combine filters
var filterValue = concatValues( buttonFilters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });

Исходный HTML

<div class="filters filter-section">
<div
class="row">
<div
class="col-sm-4">
<span
class="filter-label">Color:</span>
<div
class="btn-group" role="group" data-filter-group="color">
<span
class="btn btn-sm btn-default btn-filter is-checked" data-filter="">Any</span>
<span
class="btn btn-sm btn-default btn-filter" data-filter=".red">Red</span>
<span
class="btn btn-sm btn-default btn-filter" data-filter=".blue">Blue</span>
<span
class="btn btn-sm btn-default btn-filter" data-filter=".yellow">Yellow</span>
</div>
</div>
<div
class="col-sm-4">
<span
class="filter-label">Size:</span>
<div
class="btn-group" role="group" data-filter-group="size">
<span
class="btn btn-sm btn-default btn-filter is-checked" data-filter="">Any</span>
<span
class="btn btn-sm btn-default btn-filter" data-filter=".small">Small</span>
<span
class="btn btn-sm btn-default btn-filter" data-filter=".wide">Wide</span>
<span
class="btn btn-sm btn-default btn-filter" data-filter=".big">Big</span>
<span
class="btn btn-sm btn-default btn-filter" data-filter=".tall">Tall</span>
</div>
</div>
<div
class="col-sm-4">
<span
class="filter-label">Shape:</span>
<div
class="btn-group" role="group" data-filter-group="shape">
<span
class="btn btn-sm btn-default btn-filter is-checked" data-filter="">Any</span>
<span
class="btn btn-sm btn-default btn-filter" data-filter=".round">Round</span>
<span
class="btn btn-sm btn-default btn-filter" data-filter=".square">Square</span>
</div>
</div>

<div
class="sliders row">
<div
class="col-sm-4">
<div
class="bootstrap-slider">
<span
class="filter-label">Weight Range: <span class="filter-selection"></span></span>
<b
class="filter-min">40</b> <input id="filter-weight" type="text" class="bootstrap-slider" value="" data-filter-group="weight"> <b class="filter-max">150</b>
</div>
</div>
<div
class="col-sm-4">
<div
class="bootstrap-slider">
<span
class="filter-label">Height Range: <span class="filter-selection"></span> </span>
<b>
140</b><input id="filter-height" type="text" class="bootstrap-slider" value="" data-slider-step="1" data-filter-group="height"> <b>220</b>
</div>
</div>
</div>

<div
class="grid">
<div
class="item small round red " data-height="180" data-weight="75"><span class="content">Height:180<br>Weight: 75</span></div>
<div
class="item small round blue" data-height="179" data-weight="73"><span class="content">Height:179<br>Weight: 73</span></div>
<div
class="item small round yellow" data-height="162" data-weight="53"><span class="content">Height:162<br>Weight: 53</span></div>
</div>
</div>

<script
src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js'></script>



Добавляемый скрипт и HTML

var buttonFilters = {};

$('.filters').on( 'change', function( event ) {
var $select = $( event.target );
// get group key
var filterGroup = $select.attr('data-filter-group');
// set filter for group
buttonFilters[ filterGroup ] = event.target.value;
// combine filters
var filterValue = concatValues( buttonFilters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });


<div class="col-sm-4">
<span
class="filter-label">ColorMY:</span>
<select
class="btn-group" data-filter-group="colormy">
<option
value="">any</option>
<option
value=".red">red</option>
<option
value=".blue">blue</option>
<option
value=".yellow">yellow</option>
</select>
</div>


Понимаю, что изменить необходимо нижеприводимый код, но как не знаю.

$('.filters').on( 'click', '.btn', function() {
var $this = $(this);
var $buttonGroup = $this.parents('.btn-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
buttonFilters[ filterGroup ] = $this.attr('data-filter');
buttonFilter = concatValues( buttonFilters ) || '*';
console.log( buttonFilter )
$grid.isotope();
});

Кто знает, подскажите пожалуйста. В интернете ничего похожего не нашел.
Заранее спасибо.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.