Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 04.12.2017, 15:45
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

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(), 04.12.2017 в 15:49.
Ответить с цитированием
  #22 (permalink)  
Старый 04.12.2017, 19:35
Аватар для Some Way
Интересующийся
Отправить личное сообщение для Some Way Посмотреть профиль Найти все сообщения от Some Way
 
Регистрация: 30.11.2017
Сообщений: 17

Сообщение от 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 перестают отображаться, даже при выборе максимального значения.
Ответить с цитированием
  #23 (permalink)  
Старый 04.12.2017, 19:42
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

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

if(elemPrise >= from && elemPrise <= to){
Ответить с цитированием
  #24 (permalink)  
Старый 04.12.2017, 20:13
Аватар для Some Way
Интересующийся
Отправить личное сообщение для Some Way Посмотреть профиль Найти все сообщения от Some Way
 
Регистрация: 30.11.2017
Сообщений: 17

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

Последний раз редактировалось Some Way, 04.12.2017 в 20:16.
Ответить с цитированием
  #25 (permalink)  
Старый 05.12.2017, 00:16
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

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>

Последний раз редактировалось void(), 05.12.2017 в 00:41.
Ответить с цитированием
  #26 (permalink)  
Старый 05.12.2017, 00:21
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

Лучше этих ресурсов трудно найти:
Учебник javascript.ru
Задачник Трепачева
Ответить с цитированием
  #27 (permalink)  
Старый 05.12.2017, 16:46
Аватар для Some Way
Интересующийся
Отправить личное сообщение для Some Way Посмотреть профиль Найти все сообщения от Some Way
 
Регистрация: 30.11.2017
Сообщений: 17

Прошу прощения, начал сбоить плагин 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, 05.12.2017 в 17:02.
Ответить с цитированием
  #28 (permalink)  
Старый 05.12.2017, 18:19
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

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>
Ответить с цитированием
  #29 (permalink)  
Старый 05.12.2017, 19:23
Аватар для Some Way
Интересующийся
Отправить личное сообщение для Some Way Посмотреть профиль Найти все сообщения от Some Way
 
Регистрация: 30.11.2017
Сообщений: 17

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

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

Последний раз редактировалось Some Way, 05.12.2017 в 20:01.
Ответить с цитированием
  #30 (permalink)  
Старый 05.12.2017, 20:43
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

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

Архив на google.doc
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery UI Slider - привязка с input type number Argeares Элементы интерфейса 3 20.06.2017 15:36
Как передать value из change jquery в range jquery? drkrol jQuery 13 08.09.2015 22:36
Нужно связать input и ползунок jQuery Slider / jQuery ui IffeR jQuery 4 16.08.2014 18:01
jQuery UI Range slider как заблокировать левый ползунок по первому клику Oleg_Pupkin jQuery 3 04.09.2013 13:44
jQuery range slider Turner jQuery 0 15.03.2011 11:51