Question

我想通过选择列表从json进行过滤。现在，当我从选择列表中选择值时，它会在列表的末尾显示所选产品，而我只想显示所选的产品

function showContent(data) {
    const contentBox = document.querySelector('#content__products');
    const select = document.querySelector('.products__select');

    data.map(function (product) {
        return selectCat(product)
    })
}

function selectCat(product) {
    const select = document.querySelector('.products__select');

    createProduct(product)

    select.addEventListener('change',() => {
        if(select.value == product.cat) {
            createProduct(product);
        } 
    })
}

function createProduct(product) {
    const contentBox = document.querySelector('#product__list');
    const element = prepareElement('div',['product__elem']);
    const imageElement = prepareElement('img', ['product__img'], element);
    const nameProd = prepareElement('p',['product__name'], element);
    const catProd = prepareElement('p',['product__cat'], element);

    contentBox.appendChild(element)

    imageElement.setAttribute('src', product.img);
    nameProd.innerText = product.name;
    catProd.innerText = 'Category:' + ' ' + product.cat;
}

Answer 1

您可以隐藏与过滤器不匹配的元素。在您的代码中，我假设您首先需要用产品清洁容器。

function selectCat(product) {
    const select = document.querySelector('.products__select');

    createProduct(product)

    select.addEventListener('change',() => {
        var contentBox = document.getElementById('product__list');
        while (contentBox.firstChild) {
            contentBox.removeChild(contentBox.firstChild);
        }
        if(select.value == product.cat) {
            createProduct(product);
        } 
    })
}

选择列表过滤器JSON数据

1 个答案: