Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2019, 08:40
Новичок на форуме
Отправить личное сообщение для Maccan Посмотреть профиль Найти все сообщения от Maccan
 
Регистрация: 04.07.2019
Сообщений: 1

Неправильная работа фильтра на сайте
Приветствую всех! У меня такая проблема, сделал свой первый сайт 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();
    });
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Неправильная работа js-scroll Timurkin jQuery 11 14.05.2019 10:35
Работа IE на сайте zakupki.gov.ru Михzzz Internet Explorer 5 01.02.2017 10:59
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Работа с текстом на сайте wayzer Элементы интерфейса 5 07.06.2013 20:41
Удаленная работа на сайте через html страницу Sanches Общие вопросы Javascript 19 11.08.2009 13:21