jQuery toggle() mysql 가져 오기 배열 배열에

Question

나는 PHP로 배열을 가져 왔으며 분류되어있다. 코드 참조 :

<table><?php 
    $cat_set = get_all_cats(); 
    while($category = mysql_fetch_array($cat_set)){ 

     if($category["category"] != "no-cat"){ 
      echo "<tr colspam=\"2\"><td></td><td id=\"cats\">".$category["category"]."<td><img id=\"blink\" src=\"drop.png\"></td></td></tr>"; 
      $course_set = get_courses_for_cats($category["cat_id"]); 
       while ($course = mysql_fetch_array($course_set)) { 
       echo"<tr class=\"cont\"><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>"; 

       } 

     } 
     else { 
      $course_set = get_courses_for_cats($category["cat_id"]); 
       while ($course = mysql_fetch_array($course_set)) { 
       echo"<tr class=\"cont\"><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>"; 

      } 
     } 
    } 
     ?> 
     </table> 

모든 코스에는 범주가 있습니다. 그 카테고리를 클릭하지 않는 이제 어떻게 내가 원하는 것은 과정을 숨기기 위해 jQuery를 사용하는 것입니다 이것은 내가

<script> 
    $(document).ready(function(){ 
     $(".cont").hide(); 
     $("#cats").click(function(){ 
      $(".cont").toggle(); 
     }); 
    }) 

    </script> 

를 달성하지만 난 범주를 클릭 할 때 그것도 않는 그 모든 과정을 숨 깁니다 것입니다 그 자체에 속하지 않는다. 카테고리마다 다른 ID가 있다면 더 좋았을 것입니다. 그러나 배열이기 때문에 하나의 ID가 모든 것을 제공합니다. 이 문제를 어떻게 해결할 수 있는지 알려주세요. 감사합니다

Answer 1

"그럼 난 속성이라는 데이터 쇼 = 준 카테고리 행"{categoryName이} "

"내가 속성 데이터 고양이 = 준 후 해당 카테고리에 대한 각 행 "{카테고리 이름} 무엇 다음 당신이 데이터 쇼의 값이 그 다음 데이터 쇼 속성 "

Click for the jsfiddle.net sollution

와 동일한 데이터 고양이의 속성을 가진 모든 요소를 ​​전환 속성 발견 카테고리를 클릭 할 때 JQuery와는 않습니다 Helped by cdcoding

<script> 
    $(document).ready(function(){ 
     $(".cont").hide(); 
     $("[data-show]").click(function(){ 
      var selector = $(this).attr("data-show"); 
      $("[data-cat='"+selector+"']").toggle(); 
     }); 
    }); 
</script> 

Answer 2

사용 event Delegation는 동적이 하나를 시도 PHP

$(document).ready(function(){ 
     $(".cont").hide(); 
     $(document).on("click" , "#cats" , function(){ 
      $(".cont").toggle(); 
     }); 
    }) 

Answer 3

를 사용하여 DOM의 elments를 추가합니다. 구문 오류가있는 경우에 대한

<table> 
<?php 
    $cat_set = get_all_cats(); 
    while($category = mysql_fetch_array($cat_set)){ 
     if($category["category"] != "no-cat"){ 
      echo "<tr colspam=\"2\"><td></td><td id=\"cats\" catid='".$category["cat_id"]."'>".$category["category"]."</td><td><img id=\"blink\" src=\"drop.png\"></td></tr>"; 
      $course_set = get_courses_for_cats($category["cat_id"]); 
      while ($course = mysql_fetch_array($course_set)) { 
       echo"<tr class='cont cont".$category["cat_id"]."><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>"; 
      } 
     } 
     else { 
      $course_set = get_courses_for_cats($category["cat_id"]); 
       while ($course = mysql_fetch_array($course_set)) { 
       echo"<tr class='cont cont".$category["cat_id"]."><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>"; 
      } 
     } 
    } 
?> 
</table> 

자바 스크립트

<script> 
     $(document).ready(function(){ 
      $(".cont").hide(); 
      $("#cats").click(function(){ 
       $(".cont"+$(this).attr('catid')).toggle(); 
      }); 
     }) 
    </script> 

봐.