需要Javascript修改

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

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

来源

2011-04-19 josh

当一个元素有多个类，类名必须由**空格隔开* *，而不是逗号。 – Pointy 2011-04-19 18:47:54

首先，你不应该在你的class属性逗号。 类是空间分隔的：

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

现在，所有你需要做的是在你的change功能：

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

来源

2011-04-19 18:53:03 typeof

好吧，这将是一个很大的职位。

所有首先，你可以通过只选择元素，var regions = $('tr', '#regions');凝结可变的地区 - 这是干净的，一个标准的程序员尝试和坚持，以及更有效的/动态。 Next，类比较最简单的方法是通过重载类，所以你会有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(); 
    }); 
});

来源

2011-04-19 18:53:54 arkinEx

不要用逗号分隔的类名，对于初学者。这可能是罪魁祸首，如果你有什么不工作。

这里是这样做的另一种方法：

$(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/

来源

2011-04-19 18:58:22 hunter

需要Javascript修改

回答

相关问题