问如何使用Jquery过滤页面元素
EN

Stack Overflow用户

提问于 2020-01-12 22:24:37

回答 1查看 138关注 0票数 0

我有一个使用JS从API数据创建的页面。

我想根据两个过滤选项来过滤数据: Location和Department。

如果在任何给定时间只选择一个过滤器选项，我可以很容易地做到这一点，但感觉到任何过滤器选项的组合都可以在任何时候选择，我非常困惑。

到目前为止，我在页面上创建每个项目的JS函数看起来是这样的：

function createOffer(job){
        var $div = $('<div>', {'class': 'job-listing'});
        var $divDetails = $('<div>', {'class': 'job-listing__details'});
        var $title = $('<h2>'+job.title+'</h2>').addClass('job-listing__title');
        var $location = $('<span data-type="location" data-location="'+job.city+','+job.state+'">Location: </span>').addClass('job-listing__detail location');
        var $department = $('<span data-type="department" data-department="'+job.department+'">Department: </span>').addClass('job-listing__detail job-listing__detail--department department');
        var $viewMoreBtn = $('<a>+View Details</a>').addClass('job-listings__view-more');
        var $divViewMore = $('<div>', {'class': 'job-listing__more'});

        if(!allLocations.includes(job.city+','+job.state)){

            allLocations.push(job.city+','+job.state);

        }

        if(!allDepartments.includes(job.department)){
            allDepartments.push(job.department);
        }

        $div.append($title);
        $divDetails.append($location);
        $divDetails.append(''+job.city+','+job.state);
        $divDetails.append($department);
        $divDetails.append(''+job.department);
        $divViewMore.append(job.description);
        $div.append($divDetails);
        $div.append($divViewMore);
        $div.append($viewMoreBtn);
        allJobs.push($div);
        $jobsContainer.append($div);

    }

当两个过滤器选项都能够在任何给定时间选择多个过滤器选项时，我该如何进行过滤？

javascript

jquery

html

在线客服搭建方案

搭建集AI机器人、在线客服、智能外呼等多功能服务的客服系统，支持快速接入及自搭建客服系统，从而让顾客快速得到解答

回答 1

Stack Overflow用户

发布于 2020-01-13 05:09:25

可能是这样的：

const $jobLocationFilter = $('#jobLocationFilter').val(); // Pretend it's a text field
const $jobDepartmentFilter = $('#jobDepartmentFilter ').val(); // Pretend it's a text field

const jobsFiltered = jobListFromDatabase.filter(job => 
     // If job location filter has value, filter by it, else includes this job (returns true)
    ( $jobLocationFilter ? job.location === $jobLocationFilter : true )
    && 
     // If job dep. filter has value, filter by it, summing with the previous filter
    ( $jobDepartmentFilter ? job.department === $jobDepartmentFilter : true )

    /* 
     And this could go on with multiple filters, 
     just adding && and another expression to filter. e.g:
       `
        ( $jobMinSalaryFilter ? job.salary >= $jobMinSalaryFilter : true )
         && 
         ... others
       `
    */
);

// Function to render the filtered jobs
renderJobs(jobsFiltered);