【问题标题】：Filter / hide divs based on if user's selection in dropdown matches company data attribute根据用户在下拉列表中的选择是否与公司数据属性匹配来过滤/隐藏 div
【发布时间】：2017-06-20 01:34:22
【问题描述】：

目标

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

预期行为

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

更新 #1：

问题

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

scripts.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);
    });
});

index.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 -->

【问题讨论】：

它因为您所有的 div 都包含属性：data-industry 为空。所以，在这部分：if (industryValue) { $('.leaderboard__company').not('[data-industry="' + industryValue + '"]').hide(); } 所有的 div 都是隐藏的。对不起我的恩。 =)
@Aline 我添加了澄清细节，以更清楚地说明我要使用 if 语句完成什么。即使 data-attribute 不是一个空白字符串，它仍然存在将所有公司从排行榜中隐藏的问题。

标签： javascript jquery html css select

【解决方案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();
}

或者您可以只为所有行业和所有尺寸选项使用空字符串值。

【讨论】：

您介意在您的 if 语句中扩展/解释这里发生的事情吗？它就像一个魅力。
当然可以。您的选择列表的默认值为“size_all”和“industry__all”，这些值具有特殊含义。它们永远不会匹配公司的规模或行业数据属性，因此我们需要以不同的方式处理它们。所以条件是说，如果选择列表中有一个值并且该值不等于“size_all”（或另一个选择列表的“industry__all”），那么不要根据大小和/或过滤公司行业。将它与显示所有公司之前的代码结合起来，它不会意外过滤公司。

【解决方案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>

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

再次，对不起我的英语。

【讨论】：