Question

我想显示用户选择的值的结果，但是我只能从上次选择的结果中获取结果。这不是“选择”输入。它更像是一个标签过滤器，在左侧有所有可用的标签，如果单击/选择一个标签，它将移到右侧，并从此处返回所有结果。


<div class="low-filter">
            <div class="filter-header">
                <h3>Filter by category</h3>
            </div>
            <div class="divider-vertical"></div>
            <div id="categories-filters">
                <div class="low-filter-tags">
                </div>
                <div class="low-filter-search">
                </div>
            </div>
        </div>

这是JS将标签从左向右移动

            let searchValue;
            $('.low-filter-search').on('click', 'label.low-filter-label', function () {
                $(this).find('i').css('color', '');
                $(this).find('i').addClass('fa-times');
                $(this).find('i').removeClass('fa-check');
                $(this).detach().appendTo($('.low-filter-tags'));
                if($('.low-filter-search label.low-filter-label').length < 1){
                    productList.filter()
                }
            });

            $('.low-filter-tags').on('click', 'label.low-filter-label', function () {
                searchValue = $(this).attr('data-content');
                $(this).find('i').css('color', '#8AFF61');
                $(this).find('i').removeClass('fa-times');
                $(this).find('i').addClass('fa-check');
                $(this).detach().appendTo($('.low-filter-search'));

ListJS

$('.low-filter-tags').on('click', 'label.low-filter-label', (e) => {
    const attrCategory = e.target.getAttribute('data-content');
    productList.filter(function (item) {
        const tableCategory = item.values().category.trim();
        return attrCategory == tableCategory;
    });
});

const filterCategories = function () {
    categories = [];
//    const transformTable = table === null ? ;

    $('table tbody tr').each(function () {
        let tableData = $(this).find('.category');
        if (tableData.length > 0) {
            tableData.each(function () {
                tableCategories.push($(this).text().trim());
            });
        }
    });

    for (i; i < tableCategories.length; i++) {
        if (categories.indexOf(tableCategories[i]) === -1) {
            categories.push(tableCategories[i]);
        }
    }
    categories.sort();
    for (var element in categories) {
        i++;
        myLabel = document.createElement('label');
        myIcon = document.createElement('i');
        myLabel.className = 'low-filter-label';
        myIcon.className = 'fa fa-times';
        myLabel.setAttribute('data-sort', i);
        myLabel.setAttribute('data-content', categories[element]);
        myLabel.appendChild(myIcon);
        $('.low-filter-tags').append(myLabel);
    }

};

所有信息都来自Ajax，我想也许是问题所在。

ListJs的其他选项实际上很有效（搜索和排序）。现在，我想使其与标签一起使用

const options = {
  valueNames: ['name', 'id', 'category', 'brand', 'cost'],
};
let productList = new List('low-turnover', options);
$('.sortListByName').click(() => {
    productList.sort('name', {order: 'asc'});
});

我一直在尝试使用此example，但我无法使其正常工作。
另外...如果您有任何改进此代码的技巧，我将不胜感激，我正尝试使用更多的函数和对象来编写更简洁的代码。

谢谢。

列出Js如何从多个选定的过滤器中获取结果

0 个答案: