REST API驱动的Select下拉筛选器筛选时隐藏所有列表项问题求助

问题根因 #

你筛选逻辑是通过[data-season='xxx']属性选择器匹配列表项，但你渲染.listItem元素时，没有给元素绑定对应的data-season自定义属性，导致筛选时找不到任何匹配元素，所有列表项被隐藏。

修复方案 #

1. 核心修改：渲染列表项时补充自定义属性 #

生成listItem的代码中，给div节点加上data-season属性，属性值为当前项的category_name即可匹配筛选逻辑。

2. 可选优化：下拉框新增「全部」默认选项 #

符合初始加载展示所有列表项的通用交互习惯。

修复后完整JS代码 #

var data = [{
        "category_name": "1",
        "title": "One One",
        "more": [{
            "details": "some details"
        }]
    },
    {
        "category_name": "1",
        "title": "One Two",
        "more": [{
            "details": "some details"
        }]
    },
    {
        "category_name": "2",
        "title": "Two One",
        "more": [{
            "details": "some details"
        }]
    },
    {
        "category_name": "3",
        "title": "Three One",
        "more": [{
            "details": "some details"
        }]
}];


let listItems = "",
    // 新增默认全部选项
    categoryAll = "<option value=''>全部</option>";

for(var i = 0;i < data.length; i++) {

    var title = data[i].title,
        category_name = data[i].category_name;

    // 给列表项补充data-season属性
    listItems += "<a onclick='createAVideoContainer(" + i + ")'><div class='listItem' data-season='"+category_name+"'><p>" + title + "</p></div></a>";

    if (categoryAll.indexOf("<option value='" + category_name + "'>" + category_name + "</option>") == -1) {
        categoryAll += "<option value='" + category_name + "'>" + category_name + "</option>";
    }
}

$("#listitem").html(listItems);
$(".filter_category_name").append(categoryAll);

var filtersObject = {};

$(".filter").on("change",function() {
    var filterName = $(this).data("filter"),
        filterVal = $(this).val();
    
    if (filterVal == "") {
        delete filtersObject[filterName];
    } else {
        filtersObject[filterName] = filterVal;
    }
    
    var filters = "";
    
    for (var key in filtersObject) {
          if (filtersObject.hasOwnProperty(key)) {
            filters += "[data-"+key+"='"+filtersObject[key]+"']";
          }
    }
    
    if (filters == "") {
        $(".listItem").show();
    } else {
        $(".listItem").hide();
        $(".listItem").filter(filters).show();
    }
});

内容的提问来源于stack exchange，提问作者Dester Ken