需要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修改

回答

相關問題