Не работает сортировка товаров, как исправить?

Question

[Дмитрий Самойлов]

Хотел сделать сортировку товаров по категориям, нашел пару примеров, но почему-то не срабатывает на карточки товаров, я пробовал сделать с обычными блоками, которые написал в html, все работает хорошо, но с карточками, которые выводятся на страницу через js это не работает, класс hide, у которого стоит display: none у них появляется, но они не исчезают, как это можно исправить?

<a href="#" data-filter="aut">Автосервис</a>
    <a href="#" data-filter="diag">Диагностика</a>
    <div class="goods-out"></div>

Вывод товаров :

function goodsOut(data) {
    // вывод на страницу
    let out='';
    for (var key in data) {
        out +=`'<div class="cart" data-cat="${data[key].description}">'`;
        out +=`<p class="name">${data[key].name}</p>`;
        out +=`<div class="cost">${data[key].cost} ₽</div>`;
        out +=`<button class="add-to-cart" data-id="${key}">+</button>`;
        out +='</div>';
    }
    $('.goods-out').html(out);
    $('.add-to-cart').on('click', addToCart);
}

Сортировка по категориям:

$(function() {

    let filter = $("[data-filter]");

    filter.on("click", function(event) {
        event.preventDefault();

        let cat = $(this).data('filter');

        if(cat == 'all') {
            $("[data-cat]").removeClass("hide");
        } else {
            $("[data-cat]").each(function() {
                let workCat = $(this).data('cat');

                if(workCat != cat) {
                    $(this).addClass('hide');
                } else {
                    $(this).removeClass('hide');
                }
            });
        }
    });
});

Answer 1

[Дмитрий Самойлов]

Решил проблему классом !important, не знаю, правильно ли это, но работает, может кому полезно будет

Comments

[Артем Проненко]

лучше в коде класс hide ниже перенеси. !important - костыль

[Дмитрий Самойлов]

Артем Проненко, спасибо, сработало