Javascript-форум - jQuery range slider + carousel price

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

- jQuery (https://javascript.ru/forum/jquery/)

- - jQuery range slider + carousel price (https://javascript.ru/forum/jquery/71612-jquery-range-slider-carousel-price.html)

Some Way,
Вот оказывается, что вы так долго скрывали)
Смотрите, вот для вашей структуры - должно работать. На строчке 51 цифры 50 и 500 нужно заменить на переменные from и to. Разберетесь?

Видите, тут есть 3 слайда, но выводятся всего 2, поскольку один из них не удовлетворяет условиям - его цена 650 EUR.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<div class="owl-stage-outer">

		<div class="owl-item">
			<div class="wpb_text_column">
				<div class="wpb_wrapper">
					<p>200x200</p>
					<h5>Title</h5>
					<h6>EUR 200</h6>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>

		<div class="owl-item">
			<div class="wpb_text_column">
				<div class="wpb_wrapper">
					<p>200x200</p>
					<h5>Title</h5>
					<h6>EUR 240</h6>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>

		<div class="owl-item">
			<div class="wpb_text_column">
				<div class="wpb_wrapper">
					<p>200x200</p>
					<h5>Title</h5>
					<h6>EUR 650</h6>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>

	</div>

	<script>
		window.onload = function(){
			var prise = document.querySelectorAll('.wpb_wrapper h6');
			for(var i = 0; i < prise.length; i++){
				var elemPrise = prise[i].innerHTML.replace('EUR ', '');
				if(elemPrise > 50 && elemPrise < 500){
					prise[i].parentNode.parentNode.parentNode.style.display='block';
				}else{
					prise[i].parentNode.parentNode.parentNode.style.display='none';
				}
			}
		}
	</script>



</body>
</html>

Цитата:

Сообщение от void()

Смотрите, вот для вашей структуры - должно работать. На строчке 51 цифры 50 и 500 нужно заменить на переменные from и to. Разберетесь?

Видите, тут есть 3 слайда, но выводятся всего 2, поскольку один из них не удовлетворяет условиям - его цена 650 EUR.

C 51 строкой разобрался, существенные изменения произошли

<script>
		$(function () {
			var $range = $("#range");
			$range.ionRangeSlider({
				hide_min_max: true,
				keyboard: true,
				min: 50,
				max: 500,
				from: 250,
				to: 350,
				type: 'double',
				step: 50,
				grid: true
			});
			$range.on("change", function () {
				var $this = $(this),
				from = $this.data("from"),
				to = $this.data("to");

				/* скрипт на первый случай. Его не возбороняется улучшать и совершенствовать :) */
				var prise = document.querySelectorAll('.wpb_wrapper h6');
				for(var i = 0; i < prise.length; i++){
					var elemPrise = prise[i].innerHTML.replace('EUR ', '');
					if(elemPrise > from && elemPrise < to){
						prise[i].parentNode.parentNode.parentNode.style.display='block';
					}else{
						prise[i].parentNode.parentNode.parentNode.style.display='none';
					}
				}
			});
		});

</script>

Но, у меня в наличие слайды с ценой от 100 до 500, каждого слайда по 4е штуки и при изменение ползунка все слайды с ценой в 500 перестают отображаться, даже при выборе максимального значения.

Some Way,
Логично. На той же строке нужно заменить знаки "больше" и "меньше" ( > < ) на "больше или равно" и "меньше или равно" (>= и <=). Ну, в общем так:

if(elemPrise >= from && elemPrise <= to){

Цитата:

Сообщение от void()

Логично.

Да, вы правы, извините. Третие сутки без сна и познания слабоваты что бы сразу очевидные вещи замечать.
При изменение параметров самого ползунка начинается каша :(
Но я вам очень благодарен, плюсики в карму уже поставил.
Проблемы только с анимацией карусели, работает непонятно теперь, думаю, что нужно искать файл и исправлять саму анимацию карусельки...
Кстати, вы говорили что тратите много свободного времени на изучение javascript, посоветуете "руководство для чайников ?"

Some Way,
Хорошо план Б.
Код не претендует на красивое решение, но зато вроде работает отлично - никаких проблем ни с анимцией ни с чем-то еще. Его можно улучшить, если все ок.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>
	<style>.owl-item{background-color: #c0bdbd;}</style>
</head>
<body>

	<div id="avatar-carousel" class="owl-carousel">

		<div class="owl-item">
			<div class="wpb_text_column">
				<div class="wpb_wrapper">
					<p>200x200</p>
					<h5>Title</h5>
					<h6>EUR 70</h6>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>

		<div class="owl-item">
			<div class="wpb_text_column">
				<div class="wpb_wrapper">
					<p>200x200</p>
					<h5>Title</h5>
					<h6>EUR 90</h6>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>

		<div class="owl-item">
			<div class="wpb_text_column">
				<div class="wpb_wrapper">
					<p>200x200</p>
					<h5>Title</h5>
					<h6>EUR 230</h6>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>

		<div class="owl-item">
			<div class="wpb_text_column">
				<div class="wpb_wrapper">
					<p>200x200</p>
					<h5>Title</h5>
					<h6>EUR 210</h6>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>

		<div class="owl-item">
			<div class="wpb_text_column">
				<div class="wpb_wrapper">
					<p>200x200</p>
					<h5>Title</h5>
					<h6>EUR 270</h6>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>

	</div>

	<div style="position: relative; padding: 200px;">
		<div>
			<input type="text" id="range" value="" name="range" />
		</div>
	</div>


	<script>
		var arr = [];
		var iFrom = 50;
		var iTo = 500;

		/* формируется массив с товарами */
		window.onload = function(){
			var p = document.querySelectorAll('.wpb_wrapper p');
			var h5 = document.querySelectorAll('.wpb_wrapper h5');
			var h6 = document.querySelectorAll('.wpb_wrapper h6');

			for(var i = 0; i < p.length; i++){
				var temp = {};
				if(i%2 == 0){
					temp.p = p[i].innerHTML;
				}else{
					temp.p = p[i+1].innerHTML;
				}
				temp.h5 = h5[i].innerHTML;
				temp.h6 = h6[i].innerHTML.replace('EUR ', '');
				arr[arr.length] = temp;
			}
		}

		/* отбор товаров, соответствующих критериям */
		function sort(from, to) {
			var from = from;
			var to = to;
			var good = [];
			for(var i = 0; i < arr.length; i++){
				var x = arr[i]['h6'];
				if(x >= from && x <= to){
					good[good.length] = arr[i];
				}
			}
			add(good);
		}

		// добаавление товаров в карусель
		function add(good) {
			var good = good;

			for(var i = 0; i < good.length; i++){
				$('#avatar-carousel').trigger('add.owl.carousel', [
					'<div class="owl-item"><div class="wpb_text_column"><div class="wpb_wrapper">' +
					'<p>' + good[i]['p'] + '</p>' +
					'<h5>' + good[i]['h5'] + '</h5>' +
					'<h6> EUR ' +  good[i]['h6'] + '</h6>' +
					'<p>&nbsp;</p></div></div></div>'
					]).trigger('refresh.owl.carousel');
			}
		};

		// удаление товаров из карусели
		function del() {
			var el = document.querySelectorAll('.wpb_wrapper');
			for(var i = 0; i < el.length; i++){
				$('#avatar-carousel').trigger('remove.owl.carousel',i).trigger('refresh.owl.carousel');
			}
		}


		/* Инициализация карусели */
		$('#avatar-carousel').owlCarousel({
			loop:true,
			lazyLoad:true,
			margin:10,
			dots: false,
			nav:true,
			responsive:{
				0:{
					items:1
				},
				600:{
					items:3
				},
				1000:{
					items:5
				}
			}
		})


		var globalTimeout = null; 

		$(function () {
			var $range = $("#range");
			$range.ionRangeSlider({
				hide_min_max: true,
				keyboard: true,
				min: 50,
				max: 500,
				from: 50,
				to: 500,
				type: 'double',
				step: 1,
				prefix: "$",
				grid: true
			});
			$range.on("change", function () {
				var $this = $(this),
				from = $this.data("from"),
				to = $this.data("to");

				
				if (globalTimeout != null) {
					clearTimeout(globalTimeout);
				}
				globalTimeout = setTimeout(function() {
					globalTimeout = null;  
					del();
					sort(from, to);
				}, 2000);  

			});
		});
	</script>
</body>
</html>

Лучше этих ресурсов трудно найти:
Учебник javascript.ru
Задачник Трепачева

Прошу прощения, начал сбоить плагин Easy Modal
http://joxi.ru/EA4Xg3QFw8J0XA
При отключение библиотеки JQuery, плагин работает нормально, но ползунок не инициализируется
Сам скрипт подключаю перед </body> в таком виде

<script>
	$(function () {
		var $range = $("#range");
			$range.ionRangeSlider({
				hide_min_max: true,
				keyboard: true,
				min: 100,
				max: 500,
				from: 250,
				to: 350,
				type: 'double',
				step: 1,
				grid: true
		});
			$range.on("change", function () {
				var $this = $(this),
				from = $this.data("from"),
				to = $this.data("to");

				/* скрипт на первый случай. Его не возбороняется улучшать и совершенствовать :) */
				var prise = document.querySelectorAll('.wpb_wrapper h6');
				for(var i = 0; i < prise.length; i++){
					var elemPrise = prise[i].innerHTML.replace('EUR', '');
					if(elemPrise >= from && elemPrise <= to){
						prise[i].parentNode.parentNode.parentNode.style.display='block';
					}else{
						prise[i].parentNode.parentNode.parentNode.style.display='none';
					}
				}
			});
	});
</script>

Структура немножко вот так :)

<div class="owl-item active center">
 <div class="wpb_text_column wpb_content_element ">
  <div class="wpb_wrapper">

   <p><img src="/wp-content/uploads/galery-9.png"></p>
   <p>200×200</p>
   <h5>LARGE Title open</h5>
   <h6>EUR 10</h6>

  </div>
 </div>
</div>

Some Way,
не могу догадаться, почему сбоит Easy Modal.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>
	<style>.owl-item{background-color: #c0bdbd;} img{width: 50px;}</style>
</head>
<body>

	<div id="avatar-carousel" class="owl-carousel">

		<div class="owl-item active center">
			<div class="wpb_text_column wpb_content_element ">
				<div class="wpb_wrapper">
					<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
					<p>200×200</p>
					<h5>LARGE Title open</h5>
					<h6><span>EUR 100</span></h6>
				</div>
			</div>
		</div>

		<div class="owl-item active center">
			<div class="wpb_text_column wpb_content_element ">
				<div class="wpb_wrapper">
					<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
					<p>200×200</p>
					<h5>LARGE Title open</h5>
					<h6><span>EUR 120</span></h6>
				</div>
			</div>
		</div>

		<div class="owl-item active center">
			<div class="wpb_text_column wpb_content_element ">
				<div class="wpb_wrapper">
					<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
					<p>200×200</p>
					<h5>LARGE Title open</h5>
					<h6><span>EUR 180</span></h6>
				</div>
			</div>
		</div>

		<div class="owl-item active center">
			<div class="wpb_text_column wpb_content_element ">
				<div class="wpb_wrapper">
					<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
					<p>200×200</p>
					<h5>LARGE Title open</h5>
					<h6><span>EUR 250</span></h6>
				</div>
			</div>
		</div>

		<div class="owl-item active center">
			<div class="wpb_text_column wpb_content_element ">
				<div class="wpb_wrapper">
					<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
					<p>200×200</p>
					<h5>LARGE Title open</h5>
					<h6><span>EUR 350</span></h6>
				</div>
			</div>
		</div>

		<div class="owl-item active center">
			<div class="wpb_text_column wpb_content_element ">
				<div class="wpb_wrapper">
					<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
					<p>200×200</p>
					<h5>LARGE Title open</h5>
					<h6><span>EUR 450</span></h6>
				</div>
			</div>
		</div>

	</div>

	<div style="position: relative; padding: 50px 300px;">
		<div>
			<input type="text" id="range" value="" name="range" />
		</div>
	</div>

	<script>
	// тут будут храниться распарсенные товары
		var arr = [];

		/* формируется массив с товарами */
		window.onload = function(){
			var p = $('.wpb_wrapper p');
			var h5 = $('.wpb_wrapper h5');
			var h6 = $('.wpb_wrapper h6 span');

			for(var i = 0; i < p.length; i++){
				var temp = {};
				if(i%2 == 0){
					temp.img = p[i].innerHTML;
					temp.p = p[i+1].innerHTML;
				}else{
					temp.img = p[i+1].innerHTML;
					temp.p = p[i].innerHTML;
				}
				temp.h5 = h5[i].innerHTML;
				temp.h6 = h6[i].innerHTML.replace('EUR ', '');
				arr[arr.length] = temp;
				console.log(arr);
			}
		}

		/* отбор товаров, соответствующих критериям */
		function sort(from, to) {
			var from = from;
			var to = to;
			var good = [];
			for(var i = 0; i < arr.length; i++){
				var x = arr[i]['h6'];
				if(x >= from && x <= to){
					good[good.length] = arr[i];
				}
			}
			add(good);
		}

		// добаавление товаров в карусель
		function add(good) {
			var good = good;

			for(var i = 0; i < good.length; i++){
				$('#avatar-carousel').trigger('add.owl.carousel', [
					'<div class="owl-item active center"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">' +
					'<p>' + good[i]['img'] + '</p>' +
					'<p>' + good[i]['p'] +'</p>' +
					'<h5>' + good[i]['h5'] + '</h5>' +
					'<h6><span>EUR ' +  good[i]['h6'] + '</span></h6>' +
					'</div></div></div>'
					]).trigger('refresh.owl.carousel');
			}
		};

		// удаление товаров из карусели
		function del() {
			var el = document.querySelectorAll('.wpb_wrapper');
			for(var i = 0; i < el.length; i++){
				$('#avatar-carousel').trigger('remove.owl.carousel',i).trigger('refresh.owl.carousel');
			}
		}

		/* Инициализация карусели */
		$('#avatar-carousel').owlCarousel({
			loop:true,
			lazyLoad:true,
			margin:10,
			dots: false,
			responsive:{
				0:{
					items:1
				},
				600:{
					items:3
				},
				1000:{
					items:5
				}
			}
		})

 // переменная нужна для таймера
		var globalTimeout = null;

// инициализация бегунка
		$(function () {
			var $range = $("#range");
			$range.ionRangeSlider({
				hide_min_max: true,
				keyboard: true,
				min: 50,
				max: 500,
				from: 50,
				to: 500,
				type: 'double',
				step: 1,
				prefix: "$",
				grid: true
			});
			$range.on("change", function () {
				var $this = $(this),
				from = $this.data("from"),
				to = $this.data("to");

				// задержка после задания диапазона 1,5 секунды
				if (globalTimeout != null) {
					clearTimeout(globalTimeout);
				}
				globalTimeout = setTimeout(function() {
					globalTimeout = null;  
					del();
					sort(from, to);
				}, 1500);  

			});
		});
	</script>
</body>
</html>

Цитата:

Сообщение от void()

не могу догадаться, почему сбоит Easy Modal.

Скорее всего сам плагин подключает jQuery и + ко всему я руками подключаю туже библиотеку, для работы ползунка, на этом этапе и происходит конфликт, убираю вручную прописанное подключение jQuery и плагин работает, но перестает работать ползунок и наоборот(
http://joxi.ru/82QObxZij0QQvr

Стало намного лучше, это заметно, но появился новый бичь :(
http://joxi.ru/DmBzwMlfwnVV1m
http://joxi.ru/YmE9b6Ku01dZdm

Some Way,
Была проблема в том, что owl-карусель клонирует товары, чтоб сделать цикл из них. И эти клоны надо изначально отсеивать.

Архив на google.doc