28.08.2013, 18:21
|
|
Аспирант
|
|
Регистрация: 08.07.2013
Сообщений: 51
|
|
|
Фильтр по цене.
Добрый вечер. Пытаюсь сделать фильтрацию блоков по цене. (у каждого блока есть кастомный атрибут "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, 28.08.2013 в 18:27.
Причина: понял свою ошибку
|
|
28.08.2013, 21:38
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
feniks7,
а html ?
|
|
29.08.2013, 10:40
|
|
Аспирант
|
|
Регистрация: 08.07.2013
Сообщений: 51
|
|
хтмл:
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>
Это пример одного блока, их на деле довольно много.
Последний раз редактировалось feniks7, 29.08.2013 в 10:41.
Причина: Неверно написал все
|
|
29.08.2013, 12:09
|
|
Аспирант
|
|
Регистрация: 08.07.2013
Сообщений: 51
|
|
Ситуация изменилась. Решено заменить инпуты на 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> в эту конструкцию, перестает двигаться ползунок слайдера. Прошу помощи с решением этой проблемы...
Последний раз редактировалось feniks7, 29.08.2013 в 12:12.
Причина: Визуальные исправления
|
|
29.08.2013, 13:07
|
|
Аспирант
|
|
Регистрация: 08.07.2013
Сообщений: 51
|
|
Похоже со всем разобрался. Если вдруг кто-то умудрился заниматься такой же фигней и наткнулся на подобную ошибку. Мое решение:
<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>
То есть сделал функцию на другое событие, не на слайд, а на чейндж.
|
|
29.08.2013, 13:21
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
feniks7,
увы много букв неосилил
|
|
29.08.2013, 19:06
|
|
Аспирант
|
|
Регистрация: 08.07.2013
Сообщений: 51
|
|
|
Сообщение от рони
|
|
увы много букв неосилил
|
Жаль, правда нужна помощь... Использую JQUIslider ( http://api.jqueryui.com/slider/) в итоге, но никак не разберусь с ним.
В документации написано:
$( ".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].
Что может быть не так? |
|
29.08.2013, 20:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от feniks7
|
|
<div id="slider-range"></div>
|
|
Сообщение от feniks7
|
|
$( "#slider_range" )
|
может дело в id ? |
|
29.08.2013, 20:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от feniks7
|
|
$( "#amount1" ).text( "$" + ui.values[ 0 ] );
|
и тут не text а val если это input |
|
29.08.2013, 20:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
|
|
