根据用户在下拉列表中的选择是否与公司数据属性匹配来过滤/隐藏div

Question

Objective

• 当用户从公司规模.select__size或行业类型.select__industry下拉列表中选择选项时，如果下拉列表的值与公司的数据属性不匹配，则隐藏排行榜中.leaderboard__company的任何公司data-size或data-industry

预期行为

• 例如，用户选择一家大公司，隐藏数据大小未size_lg的所有其他.leaderboard__company

更新#1：

问题

• 我试图根据通过firstFilter和secondFilter返回的公司列表隐藏这些.leaderboard__company，但是当我在其中一个下拉列表中进行选择时，所有包含公司信息的div都被隐藏
了
• 我需要修复我的 if 语句以在仅选择第一个下拉列表时显示/隐藏这些div，仅选择第二个下拉列表时，两者兼而有之或无(这将是默认显示全部(。

脚本.js

$(function(){
    // Array of dummy data containing the full list of companies that were named this year's top workplaces in the small, midsize and large categories
    var companies = [
        {
            "size": "size_lg",
            "industry": "industry_a"
        },
        {
            "size": "size_lg",
            "industry": "industry_a"
        },
        {
            "size": "size_lg",
            "industry": "industry_b"
        },
        {
            "size": "size_lg",
            "industry": "industry_c"
        },
        {
            "size": "size_lg",
            "industry": "industry_d"
        },
        {
            "size": "size_lg",
            "industry": "industry_d"
        },
        {
            "size": "size_md",
            "industry": "industry_e"
        },
        {
            "size": "size_md",
            "industry": "industry_a"
        },
        {
            "size": "size_sm",
            "industry": "industry_b"
        },
    ];
    $('.leaderboard__company').show();
    // Every time there is a change in one of the select dropdowns, do the following
    $("select").change(function(){
        // Store the value of the visible and selected elements in each of the two dropdowns. By default the value of the size and industry dropdowns is `size__all` and `industry__all`
        var sizeValue = $(".select__size:visible").find(":selected").val();
        var industryValue = $(".select__industry:visible").find(":selected").val();
        $('.leaderboard__company').show();
        if (sizeValue) {
          $('.leaderboard__company').not('[data-size="' + sizeValue + '"]').hide();
        }
        if (industryValue) {
          $('.leaderboard__company').not('[data-industry="' + industryValue + '"]').hide();
        }
        // Just logging to the console to see if these values match when I make a selection from either of the dropdowns
        console.log(sizeValue);
        console.log(industryValue);
        // The first filter relates to the size of the company. We are using filter to create a new array that returns `sizeValue` only if the element's size property and the selected sizeValue are exactly equal to each other.
        // For instance, if a user selects the option for large companies in the dropdown, then the array should only contain companies where the element's size property is `size_lg`
        var firstFilter = companies.filter(function(el) {
            if (el.size === sizeValue) {
                return sizeValue;
            } else {
                return false;
            }
        });
        // With the second filter, we are taking the filtered first array and filtering a second time and creating a new array based on the value of selection made in the industry type dropdown.
        var secondFilter = firstFilter.filter(function(el) {
            if (el.industry === industryValue) {
                return industryValue;
            } else {
                return false;
            }
        });
        // Now that I have a filtered array with companies that match the user's selection of company size and type of industry, I need to hide the corresponding elements with a class of `.leaderboard__company` where the values of the companies do not match
        // console.log(firstFilter);
        // console.log(secondFilter);
    });
});

索引.html

<div class="filter">
    <p class="filter__title">Filter businesses by size or industry</p>
    <p class="filter__subtitle">Profile information provided by employer via WorkplaceDynamics</p>
    <select name="" id="size" class="select__size">
        <option value="size_all">All sizes</option>
        <option value="size_lg">Large</option>
        <option value="size_md">Midsize</option>
        <option value="size_sm">Small</option>
    </select>
    <select name="" id="industry" class="select__industry">
        <option value="industry__all">All industries</option>
        <option value="industry_a">Accounting</option>
        <option value="industry_b">Advertising</option>
        <option value="industry_c">Agents / Brokers</option>
        <option value="industry_d">Agriculture</option>
        <option value="industry_e">Architectural, Engineering, and Construction Svcs</option>
        <option value="industry_f">Auto Dealership</option>
        <option value="industry_g">Automotive Glass Repair and Replacement</option>
    </select>
</div>
<h2>Large</h2>
<h3>500 or more employees</h3>
<div class="leaderboard">
    <div class="leaderboard__group leaderboard--lg">
        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">1</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                    <div class="leaderboard__wrapper--name">
                        <p class="leaderboard__name">tk-name</p>
                    </div>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">2</p>
                </div>
            </div>
        </div>
        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">2</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-minus" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">0</p>
                </div>
            </div>
        </div>
        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">3</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>
        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">4</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>
        <div class="leaderboard__company" data-size="size_lg" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">5</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Large</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">8</p>
                </div>
            </div>
        </div>
    </div> <!-- .leaderboard __lg-->
</div>
<!-- START OF AD CODE -->
<div class="advertising advertising--rect">
    <div class="text-center hidden-xs">
        <div id="fixed-leaderboard-top"
            class="dfp-ad"
            data-dfp-custom-pos="fixed-leaderboard-top, atf"
            data-dfp-size="[728,90]">
        </div>
    </div>
    <div class="text-center hidden-sm hidden-md hidden-lg">
        <div id="fixed-leaderboard-top-mobile"
            class="dfp-ad"
            data-dfp-custom-pos="fixed-leaderboard-top, atf"
            data-dfp-size="[320,50]">
        </div>
    </div>
</div>
<!-- END OF AD CODE -->
<h2>Midsize</h2>
<h3>150-499 employees</h3>
<div class="leaderboard">
    <div class="leaderboard__group leaderboard--md">
        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">1</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-minus" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">0</p>
                </div>
            </div>
        </div>  <!-- .leaderboard __company-->
        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">2</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">6</p>
                </div>
            </div>
        </div>  <!-- .leaderboard __company-->
        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">3</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>  <!-- .leaderboard __company-->
        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">4</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">1</p>
                </div>
            </div>
        </div>  <!-- .leaderboard __company-->
        <div class="leaderboard__company" data-size="size_md" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">5</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Midsize</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">1</p>
                </div>
            </div>
        </div> <!-- .leaderboard __company-->
    </div> <!-- .leaderboard __md-->
</div> <!-- .leaderboard-->
<!-- START OF AD CODE -->
<div class="advertising advertising--rect">
    <div class="text-center hidden-xs">
        <div id="fixed-leaderboard-top"
            class="dfp-ad"
            data-dfp-custom-pos="fixed-leaderboard-top, atf"
            data-dfp-size="[728,90]">
        </div>
    </div>
    <div class="text-center hidden-sm hidden-md hidden-lg">
        <div id="fixed-leaderboard-top-mobile"
            class="dfp-ad"
            data-dfp-custom-pos="fixed-leaderboard-top, atf"
            data-dfp-size="[320,50]">
        </div>
    </div>
</div>
<!-- END OF AD CODE -->
<h2>Small</h2>
<h3>149 employees or less</h3>
<div class="leaderboard">
    <div class="leaderboard__group leaderboard--sm">
        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">1</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <a href=""><p class="leaderboard__name">tk-name</p></a>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">1</p>
                </div>
            </div>
        </div>
        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">2</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>
        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">3</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-up" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">5</p>
                </div>
            </div>
        </div>
        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">4</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <div class="leaderboard__change--inner">
                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                    <p class="leaderboard__change--number">3</p>
                </div>
            </div>
        </div>
        <div class="leaderboard__company" data-size="size_sm" data-industry="">
            <div class="leaderboard__rank">
                <p class="leaderboard__rank--number">5</p>
            </div>
            <div class="leaderboard__info">
                <p class="leaderboard__size">Small</p>
                <p class="leaderboard__name">tk-name</p>
                <p class="leaderboard__sector">tk-sector</p>
            </div>
            <div class="leaderboard__change">
                <p class="leaderboard__label">New</p>
            </div>
        </div>
    </div> <!-- .leaderboard __sm-->
</div> <!-- .leaderboard -->

Answer 1

你有几个选择，要么在JS函数中处理你的"size_all"和"industry_all"值。

if (sizeValue && sizeValue !== "size_all") {
  $('.leaderboard__company').not('[data-size="' + sizeValue + '"]').hide();
}
if (industryValue && industryValue !== "industry__all") {
  $('.leaderboard__company').not('[data-industry="' + industryValue + '"]').hide();
}

或者，您可以只为"所有行业"和"所有大小"选项使用空字符串值。

Answer 2

好吧，我明白你需要知道什么时候选择了菜单。因此，我建议将更改方法分开：

        $(".select__size").change(function () {
            var sizeValue = $(".select__size").val();
            $('.leaderboard__company').show();
            if (sizeValue)
                $('.leaderboard__company').not('[data-size="' + sizeValue + '"]').hide();
            if ($(".select__industry").val())
                $(".select__industry").change();
        });
        $(".select__industry").change(function () {
            var industryValue = $(".select__industry").val();
            if (!$(".select__size").val())
                $('.leaderboard__company').show();
            if (industryValue)
                $('.leaderboard__company:visible').not('[data-industry="' + industryValue + '"]').hide();
        });

当选项为默认值时，我更改了您选择的值：

<select name="" id="size" class="select__size">
            <option value="">All sizes</option>
...
</select>
<select name="" id="industry" class="select__industry">
            <option value="">All industries</option>
...
</select>

要确认测试，请将一个寄存器添加到：

<div class="leaderboard__company" data-size="size_md" data-industry="industry_d"> ...
</div>

这样，一个菜单与另一个菜单相关联

再次，对不起我的英语。