자바 스크립트 수정이 필요합니다.

Question

특정 문자열에 대한 클래스 값을 확인할 수 있어야합니다. 클래스는 쉼표로 구분 된 여러 값을 가질 수 있습니다. West가 선택되면 West가 클래스 값에 포함 된 행을 제외한 모든 것이 사라집니다. 예 :

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

자바 스크립트

<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

첫째

<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, 당신은 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

우선, 클래스 이름을 구분하는 쉼표를 사용하지 마십시오. 네가 가지고있는 것이 작동하지 않는다면 아마 범인이었다. http://jsfiddle.net/hunter/thz99/ 요소가 여러 클래스가있는 경우, 클래스 이름은 ** 공백으로 구분해야합니다