Неправильная работа фильтра на сайте
110
19 марта 2021, 10:50
У меня такая проблема, сделал свой первый сайт ves-shiny.ru, и как недавно выяснил сделал не так как хотел. В чем суть, при выборе в "Производитель" и нажав на кнопку "Выбрать" появятся шины выбранного производителя (летние, зимние, шипованные и нешипованные) вроде все нормально, но после того как пользователь захочет отсортировать с помощью "Check-box" (показать только летние или только шипованные), то к выбранному производителю добавляются все остальные производители. А я хочу чтобы "Chek-box" отрабатывали только с выбранным производителем. Как я понял моя ошибка в том, что я просто вывел все шины на страницу и скрыл их командой JS "Hide", а после нажатия на кнопку "Выбрать" срабатывает команда "Show". Вообщем вопрос как организовать, чтобы все работало правильно, буду благодарен любой помощи.
<form>
<label>
<span>Производитель</span>
<select id="brend">
<option disabled selected>Все</option>
<option value="Continental">Continental</option>
<option value="Dunlop">Dunlop</option>
<option value="Firestone">Firestone</option>
<option value="Formula">Formula</option>
<option value="GeneralTire">GeneralTire</option>
<option value="Gislaved">Gislaved</option>
<option value="Goform">Goform</option>
<option value="Goodrich">Goodrich</option>
<option value="GoodYear">GoodYear</option>
<option value="Hankook">Hankook</option>
<option value="Headway">Headway</option>
<option value="Horizon">Horizon</option>
<option value="Kama">Kama</option>
<option value="Kumho">Kumho</option>
<option value="Laufenn">Laufenn</option>
<option value="Matador">Matador</option>
<option value="Maxxis">Maxxis</option>
<option value="Michelin">Michelin</option>
<option value="Nitto">Nitto</option>
<option value="Nokian">Nokian</option>
<option value="Pirelli">Pirelli</option>
<option value="Sailun">Sailun</option>
<option value="Sava">Sava</option>
<option value="Tigar">Tigar</option>
<option value="ToyoTires">ToyoTires</option>
<option value="Viatti">Viatti</option>
<option value="Yokohama">Yokohama</option>
</select>
</label>
<label>
<span>Ширина</span>
<select id="width">
<option disabled selected>Все</option>
<option value="115">115</option>
<option value="125">125</option>
<option value="135">135</option>
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
<option value="175">175</option>
<option value="185">185</option>
<option value="195">195</option>
<option value="205">205</option>
<option value="215">215</option>
<option value="225">225</option>
<option value="235">235</option>
<option value="245">245</option>
<option value="255">255</option>
<option value="265">265</option>
<option value="275">275</option>
<option value="285">285</option>
<option value="295">295</option>
<option value="305">305</option>
<option value="315">315</option>
<option value="325">325</option>
<option value="335">335</option>
<option value="345">345</option>
</select>
</label>
<label>
<span>Высота</span>
<select id="height">
<option disabled selected>Все</option>
<option value="25">25</option>
<option value="27">27</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38.5">38.5</option>
<option value="40">40</option>
<option value="42">42</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
<option value="60">60</option>
<option value="65">65</option>
<option value="70">70</option>
<option value="75">75</option>
<option value="80">80</option>
<option value="82">82</option>
<option value="85">85</option>
<option value="90">90</option>
</select>
</label>
<label>
<span>Диаметр</span>
<select id="diametr">
<option disabled selected>Все</option>
<option value="12">12</option>
<option value="12C">12C</option>
<option value="13">13</option>
<option value="13C">13C</option>
<option value="14">14</option>
<option value="14C">14C</option>
<option value="15">15</option>
<option value="15C">15C</option>
<option value="16">16</option>
<option value="16C">16C</option>
<option value="17">17</option>
<option value="17C">17C</option>
<option value="18">18</option>
<option value="18C">18C</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</label>
</div>
<div class="col-sm-4 clearfix">
<div class="leto">
<input class="check-box" type="checkbox" id="leto" />
<label class="check" for="leto">Летняя<img src="img/solnce.png" alt="solnce"></label>
</div>
<div class="zima">
<input class="check-box" type="checkbox" id="zima" />
<label class="check" for="zima">Зимняя<img src="img/snezhinka.png" alt="snezhinka"></label>
</div>
</div>
<div class="col-sm-4 clearfix">
<div class="ship">
<input class="check-box" type="checkbox" id="ship" />
<label class="check" for="ship">Шипованная<img src="img/shipovka.png" alt="shipovka"></label>
</div>
<div class="neship">
<input class="check-box" type="checkbox" id="neship" />
<label class="check" for="neship">Нешипованная<img src="img/neshipovka.png" alt="shipovka"></label>
</div>
<button type="reset" class="button-right">Сбросить</button>
</div>
</form>
<button class="button-left" disabled>Выбрать</button>
</div>
</div>
</div>
function init() {
$.post(
"core.php",
{
"action" : "init"
},
vesShiny
);
}
function vesShiny(data) {
data = JSON.parse(data);
var out = '';
for (var key in data){
out+='<div class="cart ' + data[key] ['season'] + ' ' + data[key] ['ship'] + '" data-brend="' + data[key] ['brend'] + '" data-width="' + data[key] ['width'] + '" data-height="' + data[key] ['height'] + '" data-diametr="' + data[key] ['diametr'] + '" data-weight="' + data[key] ['weight'] + '" id="cart">';
out+='<img src="' + data[key].image +'">';
out+='<p class="brend"><b>' + data[key] ['brend'] + '</b></p>';
out+='<p class="name"><b>' + data[key] ['name'] + '</b></p>';
out+='<p class="width"><b>Ширина: ' + data[key] ['width'] + '</span></b></p>';
out+='<p class="height"><b>Высота: ' + data[key] ['height'] + '</span></b></p>';
out+='<p class="diametr"><b>Диаметр: ' + data[key] ['diametr'] + '</span></b></p>';
out+='<p class="season"><b>Сезон: ' + data[key] ['season'] + '</span></b></p>';
out+='<p class="weight"><b>Вес: ' + data[key] ['weight'] + ' кг.</span></b></p>';
out+='</div>';
}
$('.carts').html(out);
}
$(document).ready(function() {
init();
});
$('document').ready(function(){
$('.button-left').click(function(){
let carts = document.querySelector('.carts');
for (let i = 0; i < carts.children.length; i++) {
for (let j = i; j < carts.children.length; j++) {
if (+carts.children[i].getAttribute('data-weight') > +carts.children[j].getAttribute('data-weight')) {
replacedNode = carts.replaceChild(carts.children[j], carts.children[i]);
insertAfter(replacedNode, carts.children[i]);
}
}
}
});
});
function insertAfter(elem, refElem) {
return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
}
var brend_el = document.getElementById('brend');
var width_el = document.getElementById('width');
var height_el = document.getElementById('height');
var diametr_el = document.getElementById('diametr');
var carts_el = document.getElementById('carts');
var filter = function() {
var carts = carts_el.getElementsByClassName('cart');
for (var i = 0; i < carts.length; i++) {
if ((brend_el.value == 'Все' || brend_el.value == cart[i].dataset.brend)&&
(width_el.value == 'Все' || width_el.value == cart[i].dataset.width) &&
(height_el.value == 'Все' || height_el.value == cart[i].dataset.height) &&
(diametr_el.value == 'Все' || diametr_el.value == cart[i].dataset.diametr)) {
cart[i].style.display = 'inline-block';
} else {
cart[i].style.display = 'none';
}
}
};
var el = document.getElementById('carts');
if (null !== el) {
brend_el.addEventListener("change", filter);
width_el.addEventListener("change", filter);
height_el.addEventListener("change", filter);
diametr_el.addEventListener("change", filter);
}
$('#zima').click(function(){
if ($(this).is(':checked')){
$('.summer').stop().hide();
} else {
$('.summer').stop().show();
}
});
$('#leto').click(function(){
if ($(this).is(':checked')){
$('.winter').stop().hide();
} else {
$('.winter').stop().show();
}
});
$('#ship').click(function(){
if ($(this).is(':checked')){
$('.0').stop().hide();
$('.summer').stop().hide();
} else {
$('.1').stop().show();
$('.0').stop().show();
$('.summer').stop().hide();
}
});
$('#neship').click(function(){
if ($(this).is(':checked')){
$('.1').stop().hide();
$('.summer').stop().hide();
} else {
$('.0').stop().show();
$('.1').stop().show();
$('.summer').stop().hide();
}
});
$(document).ready(function() {
$('#brend').on('change', function() {
if (!$(this).val()) {
$('.button-left').prop('disabled', true);
} else {
$('.button-left').prop('disabled', false);
$('.button-left').css('cursor', 'pointer');
}
});
})
$('.button-left').click (function() {
$('.carts').show();
});
$('.button-right').click (function() {
var del = $('.carts');
del.detach().stop();
del.appendTo('.result');
$('.button-left').prop('disabled', true);
$('.button-left').css('cursor', 'no-drop');
$('.carts').hide();
});
Answer 1
Я предпочитаю делать один метод, который занимается фильтрацией, например
function filterItems() {
var filter = $('.filter'),
items = $('.item');
items.hide(); // скрываем все
items.each(function(){
if (checkItemFilter($(this), filter)) { // некий метод, который сможет определить проходит элемент по фильтру или нет
$(this).show();
}
});
// или может быть вы решите подгружать данные с сервера в зависимости от фильтра
$.ajax({
url: '/get-items.php',
data: filter.serialize(),
success: function(responseHtml){
$('.items-container').html(responseHtml);
}
});
}
И дергать этот метод при каждом изменении фильтра и при загрузке страницы
filterItems();
$('.filter input, .filter select').on('change', function(){
filterItems();
});
Таким образом фильтр всегда будет работать одинаково независимо от действий (чек, нажатие на кнопку, выбор чегонибудь)
-
20:52
-
11:43
-
07:54
Какие существуют виды рекламных бордов и как выбрать подходящий?
-
20:34
-
05:36
-
21:11
-
14:43
-
19:06
Аренда удаленного сервера: цены, провайдеры и условия. Руководство для начинающих
-
22:07
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47431 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30443 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23532 visits
- Как через css изменить цвет png изображения? 10297 visits
- Blob video url download 9926 visits
- Php curl запрос через прокси с авторизацией 9167 visits
- Работа с captcha vk api 8060 visits
© "hostciti.net" 23.9.2024 | 16:31