06.01.2019, 22:10
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2019
Сообщений: 6
|
|
|
Как сделать фильтрацию?
$(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, 06.01.2019 в 22:13.
|
|
06.01.2019, 22:26
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
bendick,
+price <= parseInt($this.find('.summa').text().replace(/\D/g, '')) &&
|
|
06.01.2019, 23:25
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2019
Сообщений: 6
|
|
Сообщение от рони
|
bendick,
+price <= parseInt($this.find('.summa').text().replace(/\D/g, '')) &&
|
Спасибо!
А еще момент не подскажите, как бы сделать...если пользователь передвигает ползунок, то например блок с элементами затемнялся, т.е. пользователь видел что что-то произошло. |
|
07.01.2019, 00:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
bendick,
function onSlide(e, ui) {
$('.offer').fadeTo(.8);
slide: onSlide,
stop : function() {
$('.offer').fadeTo(1)
}
|
|
07.01.2019, 02:31
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2019
Сообщений: 6
|
|
|
Сообщение от рони
|
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/ |
|
07.01.2019, 02:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Последний раз редактировалось рони, 07.01.2019 в 02:47.
|
|
07.01.2019, 03:24
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2019
Сообщений: 6
|
|
Спасибо!
Избавил меня от 2х дневных мучений) |
|
07.01.2019, 18:59
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2019
Сообщений: 6
|
|
А вот если у меня 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();
});
Так они начинают не корректно работать.
|
|
07.01.2019, 19:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
bendick,
у меня скил ванги недостаточен )))
|
|
07.01.2019, 19:31
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2019
Сообщений: 6
|
|
|
Сообщение от рони
|
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() два делать сымсла же нет, это не поможет.
|
|
|
|
