Приветствую всех! У меня такая проблема, сделал свой первый сайт ves-shiny.ru, и как недавно выяснил сделал не так как хотел. В чем суть, при выборе в "Производитель" и нажав на кнопку "Выбрать" появятся шины выбранного производителя (летние, зимние, шипованные и нешипованные) вроде все нормально, но после того как пользователь захочет отсортировать с помощью "Check-box" (показать только летние или только шипованные), то к выбранному производителю добавляются все остальные производители(после снятия галочки). А я хочу чтобы "Chek-box" отрабатывали только с выбранным производителем.Вообщем вопрос как организовать, чтобы все работало правильно, буду благодарен любой помощи.
<form>
</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').hide();
} else {
$('.summer').show();
}
});
$('#leto').click(function(){
if ($(this).is(':checked')){
$('.winter').hide();
} else {
$('.winter').show();
}
});
$('#ship').click(function(){
if ($(this).is(':checked')){
$('.0').hide();
$('.summer').hide();
} else {
$('.1').show();
$('.0').show();
$('.summer').hide();
}
});
$('#neship').click(function(){
if ($(this).is(':checked')){
$('.1').hide();
$('.summer').hide();
} else {
$('.0').show();
$('.1').show();
$('.summer').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();
del.appendTo('.result');
$('.button-left').prop('disabled', true);
$('.button-left').css('cursor', 'no-drop');
$('.carts').hide();
});