javascript - 使用 jQuery 显示/隐藏表格

Question

我有一系列类似于下面html代码的表格:

<table id="film"><tr>
       <th class="1">//HEAD CONTENT 1//</th>
       </tr>
       <tr>
       <td class="1">//BODY CONTENT 1//</td>
       </tr></table>
<table id="film"><tr>
       <th class="2">//HEAD CONTENT 2//</th>
       </tr>
       <tr>
       <td class="2">//BODY CONTENT 2//</td>
       </tr></table>

我希望在单击相应的头部 (<th>) 时单独展开表格。此外，表格应该以未展开的形式开始。我使用以下 jQuery 脚本:

$(document).ready(function(){
    $('#film td').hide();
});

$(document).ready(function(){
var n1 = 0;
      $('#film th.1').click(function(){
         if(n1 == 0){
         $('#film td.1').show();
         n1 = 1;
         }else{
        $('#film td.1').hide();
         n1 = 0;}
       });
var n2 = 0;
      $('#film th.2').click(function(){
         if(n2 == 0){
         $('#film td.2').show();
         n2 = 1;
         }else{
        $('#film td.2').hide();
         n2 = 0;}
       });
});

但是，当我只执行顶层表时，第二个表无法显示/隐藏。谁能看出我哪里出错了？

Answer 1

您在多个元素上使用相同的 ID。当您按 id 搜索时，jQuery 将只返回一个项目(第一个具有该 id 的项目)。所以你的代码只作用于第一个表。在表上使用类而不是 id。

<table class="film">......</table>

$('.film').each(function(f) {
    //this function will execute for each element with the class "film"
    //refer to the current element during this function using "$(this)"
});