Jquery 多个表筛选器

Question

我正在尝试使用带有复选框的Jquery将多个过滤器应用于表格。我想对“位置和年龄”列进行筛选。位置筛选器工作正常。例如，选中“东”复选框将仅显示城市映射到“东”的行。

我还需要过滤年龄列，并有一个复选框，如果选中，应该隐藏“未知”年龄。除了位置过滤器之外，还应应用此过滤器。例如，选中“隐藏未知年龄”和“东方”应仅显示东部地区有年龄的人。我将复选框的状态存储为布尔值，但我在代码中实现此内容时遇到问题。我正在考虑检查布尔值并在之前对代码进行分支（如果（cities == “”），但我认为这会导致大量重复的代码。JS小提琴：https://jsfiddle.net/qjfxgkon/

$(document).ready(function () {

    // Map regions to cities

    const regions = {

        'central': ['Chicago', 'Madison', 'Dallas'],

        'east': ['New York', 'Boston'],

        'west': ['Seattle', 'Los Angeles'],

    }

    $("input[type='checkbox']").change(function () {

        var locations = [];

        var hideNoAges = $('#hideAge').is(":checked")

        // Get ids of each region checkbox checked

        $(".location:input[type='checkbox']").each(function () {

            if ($(this).is(":checked")) {

                locations.push($(this).attr('id'));

            }

        })

        // Get list of all cities to be included in filter

        var cities = locations.map(function (i) { return regions[i].join(); }).join().split(",");

        // Branch code here? if (!hideNoAges)..... else.......

        if (cities == "") {// if no filters selected, show all items

            $("#indexTable tbody tr").show();

        } else { // otherwise, hide everything...

            $("#indexTable tbody tr").hide();

            $("#indexTable tbody tr").each(function () {

                var show = false;

                var row = $(this);

                //show only rows that match city name

                cities.forEach(function (city) {

                    if (row.find('td').eq(1).text() == city) { show = true; }

                })

                if (show) { row.show(); }

            })

        }

    })

})

Answer 1

你可以这样做：$(document).ready(function() {&nbsp; // Map regions to cities&nbsp; const regions = {&nbsp; &nbsp; 'central': ['Chicago', 'Madison', 'Dallas'],&nbsp; &nbsp; 'east': ['New York', 'Boston'],&nbsp; &nbsp; 'west': ['Seattle', 'Los Angeles'],&nbsp; }&nbsp; $("input[type='checkbox']").change(function() {&nbsp; &nbsp; var locations = [];&nbsp; &nbsp; var hideNoAges = $('#hideAge').is(":checked")&nbsp; &nbsp; // Get ids of each region checkbox checked&nbsp; &nbsp; $(".location:input[type='checkbox']").each(function() {&nbsp; &nbsp; &nbsp; if ($(this).is(":checked")) {&nbsp; &nbsp; &nbsp; &nbsp; locations.push($(this).attr('id'));&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; &nbsp; // Get list of all cities to be included in filter&nbsp; &nbsp; var cities = locations.map(function(i) {&nbsp; &nbsp; &nbsp; return regions[i].join();&nbsp; &nbsp; }).join().split(",");&nbsp; &nbsp; if (cities == "" && !hideNoAges) { // if no filters selected, show all items&nbsp; &nbsp; &nbsp; $("#indexTable tbody tr").show();&nbsp; &nbsp; } else { // otherwise, hide everything...&nbsp; &nbsp; &nbsp; $("#indexTable tbody tr").hide();&nbsp; &nbsp; &nbsp; $("#indexTable tbody tr").each(function() {&nbsp; &nbsp; &nbsp; &nbsp; var show = false;&nbsp; &nbsp; &nbsp; &nbsp; var row = $(this);&nbsp; &nbsp; &nbsp; &nbsp; if (hideNoAges) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (row.find('td').eq(2).text() == "Unknown") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (cities != "") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cities.forEach(function(city) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (row.find('td').eq(1).text() != city) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; cities.forEach(function(city) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (row.find('td').eq(1).text() == city) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (hideNoAges && row.find('td').eq(2).text() == "Unknown") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; if (show) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; row.show();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; })})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="indexTable">&nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Location</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Age</th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Bob</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Chicago</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>24</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Mike</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>New York</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Unknown</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Sarah</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Seattle</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>30</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Bill</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Los Angeles</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>51</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Gary</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Boston</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>37</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Melissa</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Madison</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Unknown</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Greg</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Dallas</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>61</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; </table>&nbsp; &nbsp; <h5>Age Filter</h5>&nbsp; &nbsp; <label for="hideAge">Hide unknown ages</label>&nbsp; &nbsp; <input type="checkbox" id="hideAge">&nbsp; &nbsp; <h5>Region Filter</h5>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label for="east">East</label>&nbsp; &nbsp; &nbsp; <input type="checkbox" id="east" class="location">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label for="central">Central</label>&nbsp; &nbsp; &nbsp; <input type="checkbox" id="central" class="location">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label for="west">West</label>&nbsp; &nbsp; &nbsp; <input type="checkbox" id="west" class="location">&nbsp; &nbsp; </div>