Фильтр по цене.
Добрый вечер. Пытаюсь сделать фильтрацию блоков по цене. (у каждого блока есть кастомный атрибут "data-price" равный некоторому числу.).
Возникло сразу множество пробел, которые я не смог решить: 1)goods_input_price_min - инпут тайп="намбер", почему то после 2-х нажатий кнопки вверх, вместо 20(шаг="10"), становится 1110(валуе соседнего инпута goods_input_price_max). Потом если отматывать вниз значение минимального инпута, оно не дает делать меньше 1000... и вечно скачет на 1110. 2)не понимаю как убрать элементы которые не входят в ценовой диапазон. Вроде бы сделал некий массив (jQuery.makeArray($(".moiki .tdk_item"));). Но что с ним делать дальше придумать не могу. Да и вообще мне кажется что не верно массив задал. Буду рад любой помощи по существу.
<script language="JavaScript" type="text/javascript">
$("#goods_input_price_min").change(function(){
var min_value = this.value;
var max_value = document.getElementById("goods_input_price_max").value;
if(min_value>max_value){
document.getElementById("goods_input_price_min").value = max_value;
}
var array_elements = jQuery.makeArray($(".moiki .tdk_item"));
});
</script>
Была идея получить размер массива. (кстати не могу найти как это сделать. Проблвал .length - не прокатило.) Дальше по этой длине массива сделать цикл фор, вытягивать из выбранного элемента массива (если это возможно) кастомный атрибут и сравнивать с переменными максимальной и минимальной цены. Если не входит в рендж, то хайд(). Если попал то шоу(). С длиной массива разобрался. Ставил лишние скобки. Работает так: var array_elements_length = array_elements.length; |
feniks7,
а html ? |
хтмл:
1) инпуты. (знаю что стилям в атрибутах дива не место, перенесу по завершению) <div id="goods_filter" style="height:100px;background-color:#cdcdcd;margin-left:10px;margin-bottom:5px;margin-top:2px;"> <div style="font-size:18px;padding:20px;padding-bottom:10px;"><span >Стоимость:<span> от</span><input type="number" value="0" min="0" step="10" id="goods_input_price_min"><span> до</span></span> <input type="number" value="1110" min="1000" step="10" id="goods_input_price_max"></div> А вот с самими дивами гораздо хуже дела обстоят... <div data-price="1 000" valign="top" id="bx_2097971167_14197" align="left" class="moiki Blanco 1 tdk_item" style="min-width:260px;width:260px;padding-left:0;margin-left:0;display:inline-block;padding-right:2%;padding-bottom:1%;height:220px;vertical-align:top;"> <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td valign="top" width="260px"> <a id="m_Auflagespuele_R-ES_8_x_5_Edelstahl" href="#" class="items"> <div class="item" style="background-image:url(/upload/iblock/0b3/0b34e934ead190309842aea2b982fd36.jpg); background-size:100% 100%;height:220px;"> <div class="descr_cont"> <div class="descr" style="bottom:-78px;"> <div class="preview_text" style="bottom:-78px;"> </div> </div> <div class="name" style="margin-left:2190px;"> <h3 style="font-size:0px;">Auflagespuele_R-ES_8_x_5_Edelstahl</h3> </div> <div class="name" style="right:1%;margin-top:78px;"> <h3 style="float:right;"><span style="font-size:0px;">=</span><span style="">1 000</span> P</h3> </div> <div class="name" style="margin-left:2190px;"> <h3 style="font-size:0px;"><span style="font-size:0px;">=</span><span >800х500mm</span></h3> </div> <div class="name" style="margin-left:2190px;"> <h3 style="font-size:0px;"><span style="font-size:0px;">=</span><span >сталь</span></h3> </div> <div class="name" style="margin-left:2190px;"> <h3 style="font-size:0px;"><span style="font-size:0px;">=</span><span >Blanco</span></h3> </div> <div class="name" style="margin-left:2190px;"> <h3 style="font-size:0px;"><span style="font-size:0px;">=</span><span >5 лет</span></h3> </div> <div class="m_Auflagespuele_R-ES_8_x_5_Edelstahl" style="background: url(/upload/iblock/ea4/ea4f96b6a349f15b4cfbca65011a7bb4.jpg);"></div> </div> </div> </a> </td> </tr> </table> </div> Это пример одного блока, их на деле довольно много. |
Ситуация изменилась. Решено заменить инпуты на JQslider.
<p> <label for="amount">Price range:</label> <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> </p> <div id="slider-range"></div>
<script language="JavaScript" type="text/javascript">
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 2000,
step:50,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
var min_value = ui.values[0];
var max_value = ui.values[1];
var array_elements = jQuery.makeArray($(".moiki .tdk_item"));
var array_elements_length = array_elements.length;
for(var i=0; i<=array_elements_length; i++){
var tdk_filter_current_id=array_elements[i].id;
var tdk_filter_current_price=+array_elements[i].getAttribute("data-price");
if(tdk_filter_current_price<min_value||tdk_filter_current_price>max_value){
$( '#'+tdk_filter_current_id ).hide();
}
else{
$( '#'+tdk_filter_current_id ).show();
}
}
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
Теперь такая проблема что как только я добавляю <if else> в эту конструкцию, перестает двигаться ползунок слайдера. Прошу помощи с решением этой проблемы... |
Похоже со всем разобрался. Если вдруг кто-то умудрился заниматься такой же фигней и наткнулся на подобную ошибку. Мое решение:
<script language="JavaScript" type="text/javascript">
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 2000,
step:50,
values: [ 0, 1600 ],
slide: function( event, ui ) {
$( "#amount1" ).text( "$" + ui.values[ 0 ] );
$( "#amount2" ).text( "$" + ui.values[ 1 ] );
},
change: function( event, ui ) {
var min_value = ui.values[0];
var max_value = ui.values[1];
var array_elements = jQuery.makeArray($(".moiki .tdk_item"));
var array_elements_length = array_elements.length;
for(var i=0; i<=array_elements_length; i++){
var tdk_filter_current_id=array_elements[i].id;
var tdk_filter_current_price=+array_elements[i].getAttribute("data-price");
if(tdk_filter_current_price<min_value||tdk_filter_current_price>max_value){
$( '#'+tdk_filter_current_id ).hide();
}
else{
$( '#'+tdk_filter_current_id ).show();
}
}
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
То есть сделал функцию на другое событие, не на слайд, а на чейндж. |
feniks7,
увы много букв неосилил |
Цитата:
В документации написано: $( ".selector" ).slider( "option", "max", 50 );- чтобы поменять максимальнео значение слайдера в любой момент времени. Однако на деле у меня подобного рода обращения не работают вовсе. Как пример, пытаюсь при нажатии на один элемент чтобы сенялся степ слайдера(изначально инициализирется с шагом 50):
$("#check_moiki").click(function(){
$('#slider_range').slider("option", "step", 1);
var steps = $( "#slider_range" ).slider( "option", "step" );
alert(steps);
return false;
});
тут алерт выводит: [object Object]. Что может быть не так? |
Цитата:
Цитата:
|
Цитата:
|
feniks7,
вот так примерно хотелосьбы видеть ваш код а не кусками
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$("#slider_range").slider({
range: true,
min: 0,
max: 2000,
step:50,
values: [ 0, 1600 ],
slide: function( event, ui ) {
$( "#amount1" ).val( "$" + ui.values[ 0 ] );
$( "#amount2" ).val( "$" + ui.values[ 1 ] );
}
})
$("#check_moiki").click(function(){
$('#slider_range').slider("option", "step", 1);
var steps = $( "#slider_range" ).slider( "option", "step" );
alert(steps);
return false;
});
})
</script>
</head>
<body>
<p> <label for="amount">Price range:</label>
<input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" value = "$0" />
<input type="text" id="amount2" style="border: 0; color: #f6931f; font-weight: bold;" value = "$1600"/>
</p>
<div id="slider_range"></div>
<input name="" type="button" value="step 1" id="check_moiki">
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:25. |