Как сделать фильтрацию?
$(document).ready(function(){
$("#slider2").slider({
range: "min",
value: 12,//Значение, которое будет выставлено слайдеру при загрузке
min: 6,//Минимально возможное значение на ползунке
max: 60,//Максимально возможное значение на ползунке
step: 6,//Шаг, с которым будет двигаться ползунок
slide: onSlide,
});
$("#slider1").slider({
range: "min",
value: 100000,//Значение, которое будет выставлено слайдеру при загрузке
min: 10000,//Минимально возможное значение на ползунке
max: 1000000,//Максимально возможное значение на ползунке
step: 10000,//Шаг, с которым будет двигаться ползунок
slide: onSlide,
});
function onSlide(e, ui) {
$(this).closest('.filter-block').find('.right-nomer-value').html(ui.value);
setTimeout(showItems);
}
function showItems() {
const
price = $('#slider1').slider('value'),
days = $('#slider2').slider('value');
$('.offer').each(function() {
const $this = $(this);
$this.toggle(
price <= parseInt($this.find('.summa').text()) &&
days <= parseInt($this.find('.srok').text())
);
});
$('.empty').toggle(!$('.komnata:visible').length);
}
showItems();
});
Скрипт берет из div число и фильтрует. Что мне нужно: Сделана фильтрация цены и срока, т.е. скрипт срабатывает если только равное число например - 1000 (без пробелов и тд.), вот меня интересует можно ли сделать фильтрацию если допустим у меня в блоке div будет написано так: "1 000 руб." т.е. чтобы работало и с пробелами и без, а так же на буквы он не обращал внимания. Возможно ли такое? Т.е. нужно чтобы убирал пробелы, буквы, точки и оставлял только цифры. |
bendick,
+price <= parseInt($this.find('.summa').text().replace(/\D/g, '')) &&
|
Цитата:
А еще момент не подскажите, как бы сделать...если пользователь передвигает ползунок, то например блок с элементами затемнялся, т.е. пользователь видел что что-то произошло. |
bendick,
function onSlide(e, ui) {
$('.offer').fadeTo(.8);
slide: onSlide,
stop : function() {
$('.offer').fadeTo(1)
}
|
Цитата:
function onSlide(e, ui) {
$(this).closest('.filter-block').find('.right-nomer-value').html(ui.value);
setTimeout(showItems);
}
Это выводит значение на котором находится сейчас ползунок. Если я вставляю: $('.offer').fadeTo(.8);
Все блоки начинают пропадать при передвижении. Что-то про ковырялся так и не понял. Вот: https://jsfiddle.net/svuzq90g/3/ |
bendick,
https://jsfiddle.net/svuzq90g/7/ |
Цитата:
Избавил меня от 2х дневных мучений) |
А вот если у меня 3 слайдера, по сути меняются только классы дивов, а код одинаковый соответственно скрипты начинают путаться, как можно их разделить?
$(document).ready(function(){
$("#slider2").slider({
range: "min",
value: 12,//Значение, которое будет выставлено слайдеру при загрузке
min: 6,//Минимально возможное значение на ползунке
max: 60,//Максимально возможное значение на ползунке
step: 6,//Шаг, с которым будет двигаться ползунок
slide: onSlide,
stop : function() {
$('.block-kol').fadeTo(0,1)
}
});
$("#slider1").slider({
range: "min",
value: 100000,//Значение, которое будет выставлено слайдеру при загрузке
min: 10000,//Минимально возможное значение на ползунке
max: 1000000,//Максимально возможное значение на ползунке
step: 10000,//Шаг, с которым будет двигаться ползунок
slide: onSlide,
stop : function() {
$('.block-kol').fadeTo(0,1)
}
});
function onSlide(e, ui) {
$('.block-kol').fadeTo(0, 0.5);
$(this).closest('.filter-block').find('.right-nomer-value').html(ui.value);
setTimeout(showItems);
}
function showItems() {
const
price = $('#slider1').slider('value'),
days = $('#slider2').slider('value');
$('.kr-offer').each(function() {
const $this = $(this);
$this.toggle(
price <= parseInt($this.find('.kr-offer-summa').text().replace(/\D/g, '')) &&
days <= parseInt($this.find('.kr-offer-srok').text().replace(/\D/g, ''))
);
});
$('.no-offer').toggle(!$('.kr-offer:visible').length);
}
showItems();
});
$(document).ready(function(){
$("#slider4").slider({
range: "min",
value: 14,//Значение, которое будет выставлено слайдеру при загрузке
min: 7,//Минимально возможное значение на ползунке
max: 60,//Максимально возможное значение на ползунке
step: 1,//Шаг, с которым будет двигаться ползунок
slide: onSlide,
stop : function() {
$('.block-kol').fadeTo(0,1)
}
});
$("#slider3").slider({
range: "min",
value: 10000,//Значение, которое будет выставлено слайдеру при загрузке
min: 1000,//Минимально возможное значение на ползунке
max: 50000,//Максимально возможное значение на ползунке
step: 500,//Шаг, с которым будет двигаться ползунок
slide: onSlide,
stop : function() {
$('.block-kol').fadeTo(0,1)
}
});
function onSlide(e, ui) {
$('.block-kol').fadeTo(0, 0.5);
$(this).closest('.filter-block').find('.right-nomer-value').html(ui.value);
setTimeout(showItems);
}
function showItems() {
const
price = $('#slider3').slider('value'),
days = $('#slider4').slider('value');
$('.kr-offer').each(function() {
const $this = $(this);
$this.toggle(
price <= parseInt($this.find('.kr-offer-summa').text().replace(/\D/g, '')) &&
days <= parseInt($this.find('.kr-offer-srok').text().replace(/\D/g, ''))
);
});
$('.no-offer').toggle(!$('.kr-offer:visible').length);
}
showItems();
});
Так они начинают не корректно работать. |
bendick,
у меня скил ванги недостаточен ))) |
Цитата:
$(document).ready(function(){
$("#slider2").slider({
range: "min",
value: 12,//Значение, которое будет выставлено слайдеру при загрузке
min: 6,//Минимально возможное значение на ползунке
max: 60,//Максимально возможное значение на ползунке
step: 6,//Шаг, с которым будет двигаться ползунок
slide: onSlide,
stop : function() {
$('.block-kol').fadeTo(0,1)
}
});
$("#slider1").slider({
range: "min",
value: 100000,//Значение, которое будет выставлено слайдеру при загрузке
min: 10000,//Минимально возможное значение на ползунке
max: 1000000,//Максимально возможное значение на ползунке
step: 10000,//Шаг, с которым будет двигаться ползунок
slide: onSlide,
stop : function() {
$('.block-kol').fadeTo(0,1)
}
});
function onSlide(e, ui) {
$('.block-kol').fadeTo(0, 0.5);
$(this).closest('.filter-block').find('.right-nomer-value').html(ui.value);
setTimeout(showItems);
}
function showItems() {
const
price = $('#slider1').slider('value'),
days = $('#slider2').slider('value');
$('.kr-offer').each(function() {
const $this = $(this);
$this.toggle(
price <= parseInt($this.find('.kr-offer-summa').text().replace(/\D/g, '')) &&
days <= parseInt($this.find('.kr-offer-srok').text().replace(/\D/g, ''))
);
});
$('.no-offer').toggle(!$('.kr-offer:visible').length);
}
showItems();
});
Ну вот к примеру, выше код, это код одного слайдера. А как добавить аналогичный скрипт в один файл, чтобы он не пересекался с первым? $(document).ready(function() два делать сымсла же нет, это не поможет. |
| Часовой пояс GMT +3, время: 07:53. |