需要修改Javascript

Question

我需要能够检查某个字符串的类值。该类可以有多个用逗号分隔的值。代码需要修改，因此当选择 West 时，除了类值中包含 West 的行之外，所有内容都会消失。示例:

<tr class="West"></tr> (shows up)
<tr class="West,NE"></tr> (shows up)
<tr class="NE"></tr> (doesn't show)

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    var links = $('#lb01'),
        regions = $('.West,.NE,.Southeast,.East,.South,.Central,.Northeast,.HO,.National,.US,.Texas,.Mid-Central');
    regions.not('.West').hide();
    links.change(function(event) {
        regions.hide().filter('.' + this.options[this.selectedIndex].id).show();
    });
});
</script>

html

<div class="tabset">

            <div id="tab1" class="tab-box">
                <div class="form-holder">
                    <form action="#">
                        <fieldset>
                            <label for="lb01"><strong>Choose District:</strong></label>
                            <select id="lb01">
                                <option class="bound" id="West">WEST</option>
                                <option class="bound" id="NE">NE</option>

                                <option class="bound" id="Southeast">SOUTHEAST</option>
                                <option class="bound" id="East">EAST</option>
                                <option class="bound" id="South">SOUTH</option>
                                <option class="bound" id="Central">CENTRAL</option>
                                <option class="bound" id="Northeast">NORTHEAST</option>
                                <option class="bound" id="HO">HO</option>

                                <option class="bound" id="US">US</option>
                                <option class="bound" id="Mid-Central">Mid-Central</option>
                                <option class="bound" id="Texas">Texas</option>
                            </select>
                        </fieldset>
                    </form>
                </div>

                <div class="report-box">
                    <table>
                        <thead>
                            <tr>
                                <td class="name">Name</td>
                                <td class="department">Department</td>
                                <td class="title">Title</td>

                                <td class="district">District</td>
                                <td class="profile">&nbsp;</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="West,NE,Southeast">
    <td>Name1</td>
    <td></td>
    <td></td>
    <td></td>
    <td><a class="btn-profile" href="#">PROFILE</a></td>
</tr><tr class="West">
    <td>Name2</td>
    <td></td>
    <td></td>
    <td></td>
 <td><a class="btn-profile" href="#">PROFILE</a></td>
</tr><tr class="East">
    <td>Name3</td>
    <td></td>
    <td></td>
    <td></td>
    <td><a class="btn-profile" href="#">PROFILE</a></td>
</tr>

Answer 1

首先，您的 class 属性中不应包含逗号。 类以空格分隔:

<tr class="West NE"></tr>

现在，您需要做的就是在 change 函数中执行以下操作:

links.change(function(event) {
    $('.report-box tr').hide().find('.' + this.value).show();
});