Javascript-форум - Как сделать фильтрацию?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как сделать фильтрацию? (https://javascript.ru/forum/dom-window/76384-kak-sdelat-filtraciyu.html)

Как сделать фильтрацию?

$(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, '')) &&

Цитата:

Сообщение от рони (Сообщение 501464)

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)
}

Цитата:

Сообщение от рони (Сообщение 501467)

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/

Цитата:

Сообщение от рони (Сообщение 501474)

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,
у меня скил ванги недостаточен )))

Цитата:

Сообщение от рони (Сообщение 501511)

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() два делать сымсла же нет, это не поможет.