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();
});

Answer 2

好的，这将是一个很重要的帖子。

首先，您可以通过选择元素var regions = $('tr', '#regions');来压缩区域变量 - 这很干净，标准编码器尝试并坚持，更有效/动态。 下一步，类比较的最简单方法是重载类，因此您可以使用class="West NE"代替class="West,NE" - 这样您就可以使用jQuery.hasClass函数这非常有用。

根据我刚才所说的，我想出了新代码：

$(document).ready(function(){
    var links = $('#lb01');
    var regions = $("tr","regions");

    links.bind("change",function(){
        regions.hide().hasClass(this.options[this.selectedIndex].id).show();
    });
});

Answer 3

对于初学者，请勿使用逗号分隔您的班级名称。如果你的工作不起作用，这可能是罪魁祸首。

以下是另一种方法：

$(document).ready(function() {
    var $links = $('#lb01');
    $(".report-box tbody tr").hide();

    $('tr.West').show();

    $links.change(function(event) {
        var region = $(this).find(":selected").attr("id");
        alert(region);
        $(".report-box tbody tr").hide();
        $(".report-box tbody tr." + region).show();
    });
});

工作示例：http://jsfiddle.net/hunter/thz99/

需要Javascript修改

3 个答案: