Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.03.2018, 16:11
Новичок на форуме
Отправить личное сообщение для kismedia Посмотреть профиль Найти все сообщения от kismedia
 
Регистрация: 30.07.2010
Сообщений: 9

Добавить еще один элемент фильтрации
Добрый день, с javascript у меня как то напряженно(

Есть фильтр товаров http://rodmon.ru/katalog/zapchasti/shnekovye-pary

Подгружется по чек боксу динамически.

Добавил новый фильтр "Тип товара" и хотел сделать по аналогии

<?
 asort($typezapList);
 $ii = 10;
foreach ( $typezapList as $mm => $cc) {
	?>
	<div class="checkbox">
		<input type="checkbox" id="check<?=$ii?>" data-type="<?=$mm?>">
		<label for="check<?=$ii++?>"><?=$mm." (".$cc.")"?></label>
	</div>
	<?
}
						?>


						<!-- <a href="#">показать ещё</a> -->



				</div>


				<div class="vendor" id="catalogVendor">
				<div class="h2 h3">
						<strong>Производитель</strong>
				</div>


						<?
 asort($manufList);
 $i = 1;
foreach ( $manufList as $m => $c) {
	?>
	<div class="checkbox">
		<input type="checkbox" id="check<?=$i?>" data-vendor="<?=$m?>">
		<label for="check<?=$i++?>"><?=$m." (".$c.")"?></label>
	</div>
	<?
}
						?>


						<!-- <a href="#">показать ещё</a> -->



				</div>


За динамическую вывод отвечает, как я понял, этот скрипт

var $ = jQuery;
var minPrice = Number($('#minCost').val());
var maxPrice = Number($('#maxCost').val());

// jQuery("#slider").slider({
// 	min: minPrice,
// 	max: maxPrice,
// 	values: [minPrice,maxPrice],
// 	range: true,
// 	stop: function(event, ui) {
// 		jQuery("#minCost").val(jQuery("#slider").slider("values",0));
// 		jQuery("#maxCost").val(jQuery("#slider").slider("values",1));
// 		filterUse();
//     },
//     slide: function(event, ui){
// 		jQuery("#minCost").val(jQuery("#slider").slider("values",0));
// 		jQuery("#maxCost").val(jQuery("#slider").slider("values",1));
// 		filterUse();
//     }
// });

$( "#slider" ).slider({
      range: true,
      min: minPrice,
      max: maxPrice,
      values: [ minPrice, maxPrice ],
      slide: function( event, ui ) {
		jQuery("#minCost").val(ui.values[ 0 ]);
		jQuery("#maxCost").val(ui.values[ 1 ]);
		filterUse();
      }
 });
  
function filterUse(){
	var count = 0;

	$('#catalogList>.item').hide();

	$('#catalogVendor input:checked').each(function(){
		$('#catalogList>.item[data-vendor="'+$(this).attr('data-vendor')+'"]').show();
		count++;
	});

	if(count == 0){
		$('#catalogList>.item').show();
	}

	$('#catalogList>.item').each(function(){
		if(Number($(this).attr('data-price')) < Number($('#minCost').val()) ||  Number($(this).attr('data-price')) > Number($('#maxCost').val())){
			$(this).hide();
		}
	});
}
$('#catalogShowPrice').click(function(){;
	filterUse();
	return false;
});

$('#catalogClearPrice').click(function(){
	
	$('#catalogList>.item').show();

	jQuery("#minCost").val(minPrice);
	jQuery("#maxCost").val(maxPrice);

	$("#slider").slider( "values", 0, minPrice );
	$("#slider").slider( "values", 1, maxPrice );

	$('#catalogVendor input').attr('checked', false);
	return false;
});
$('#catalogVendor input').click(function(){
	filterUse();
});


jQuery("#minCost").change(function(){

	var value1 = Number(jQuery("#minCost").val());
	var value2 = Number(jQuery("#maxCost").val());

	if(value1 == NaN) {value1 = minPrice;}
	if(value2 == NaN) {value2 = maxPrice;}

	if(value1 < minPrice){
		value1 = minPrice;
	}

    if(value1 > value2){
		value1 = value2;
	}
	jQuery("#minCost").val(value1);
	jQuery("#slider").slider("values",0,value1);

	filterUse();	
});

// jQueryjQuery(".close").slider("disable");
jQuery("#maxCost").change(function(){
		
	var value1 = Number(jQuery("#minCost").val());
	var value2 = Number(jQuery("#maxCost").val());
	
	if(value1 == NaN) {value1 = minPrice;}
	if(value2 == NaN) {value2 = maxPrice;}

	if (value2 > maxPrice) { 
		value2 = maxPrice; 
		$("#maxCost").val(1000)
	}

	if(parseInt(value1) > parseInt(value2)){
		value2 = value1;
	}
	$("#maxCost").val(value2);

	jQuery("#slider").slider("values",1,value2);

	filterUse();
});



Если не сложно тут, сможет кто-нибудь подсказать как правильно расширить функции с учетом нового фильтра?
Что бы так же как в основном варианте подгружались товары

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2018, 16:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

kismedia,
в строке 47 составить массив выбранных типов arr, в строке 49 добавить проверку ||arr.indexOf(this.type) == -1
Ответить с цитированием
  #3 (permalink)  
Старый 16.03.2018, 16:35
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

kismedia,
У вас в каталоге товаров #catalogList>.item есть data-price и data-vendor, по которым делается отбор по заданным ценам и производителям.
Но data_type отсутствует, так что не по чему делать отбор.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как добавить еще поле? Jony X Общие вопросы Javascript 12 06.07.2018 23:47
добавить элемент на карту TomTykver Элементы интерфейса 1 11.05.2015 23:22
Скрипт калькулятора (не могу добавить еще одно значение) Jee_Day Я не знаю javascript 2 22.05.2009 13:19
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Еще один вопрос по setTimeout setInterval Хранитель Света Общие вопросы Javascript 5 12.03.2009 22:37