04.12.2017, 15:45
|
 |
Профессор
|
|
Регистрация: 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> </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> </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> </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.
|
|
04.12.2017, 19:35
|
 |
Интересующийся
|
|
Регистрация: 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 перестают отображаться, даже при выборе максимального значения.
|
|
04.12.2017, 19:42
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Some Way,
Логично. На той же строке нужно заменить знаки "больше" и "меньше" ( > < ) на "больше или равно" и "меньше или равно" (>= и <=). Ну, в общем так:
if(elemPrise >= from && elemPrise <= to){
|
|
04.12.2017, 20:13
|
|
Интересующийся
|
|
Регистрация: 30.11.2017
Сообщений: 17
|
|
|
Сообщение от void()
|
|
Логично.
|
Да, вы правы, извините. Третие сутки без сна и познания слабоваты что бы сразу очевидные вещи замечать.
При изменение параметров самого ползунка начинается каша 
Но я вам очень благодарен, плюсики в карму уже поставил.
Проблемы только с анимацией карусели, работает непонятно теперь, думаю, что нужно искать файл и исправлять саму анимацию карусельки...
Кстати, вы говорили что тратите много свободного времени на изучение javascript, посоветуете "руководство для чайников ?"
Последний раз редактировалось Some Way, 04.12.2017 в 20:16.
|
|
05.12.2017, 00:16
|
|
Профессор
|
|
Регистрация: 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> </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> </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> </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> </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> </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> </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.
|
|
05.12.2017, 00:21
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
|
|
|
05.12.2017, 16:46
|
|
Интересующийся
|
|
Регистрация: 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.
|
|
05.12.2017, 18:19
|
|
Профессор
|
|
Регистрация: 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>
|
|
05.12.2017, 19:23
|
|
Интересующийся
|
|
Регистрация: 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.
|
|
05.12.2017, 20:43
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Some Way,
Была проблема в том, что owl-карусель клонирует товары, чтоб сделать цикл из них. И эти клоны надо изначально отсеивать.
Архив на google.doc
|
|
|
|
