Добавить еще один элемент фильтрации
Добрый день, с 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(); }); Если не сложно тут, сможет кто-нибудь подсказать как правильно расширить функции с учетом нового фильтра? Что бы так же как в основном варианте подгружались товары Спасибо! |
kismedia,
в строке 47 составить массив выбранных типов arr, в строке 49 добавить проверку ||arr.indexOf(this.type) == -1 |
kismedia,
У вас в каталоге товаров #catalogList>.item есть data-price и data-vendor, по которым делается отбор по заданным ценам и производителям. Но data_type отсутствует, так что не по чему делать отбор. |
Часовой пояс GMT +3, время: 02:39. |