使用jQuery显示/隐藏表 [英] Show/hide tables with jQuery

问题描述

我有一个类似于下面的HTML code一系列表：

I have a series of tables similar to the following html code:

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

我想（小于;第i ）各自的头，当表单独扩大被点击。此外，该表应该开始未展开。我用下面的jQuery脚本：

I want the tables to expand individually when the respective head (<th>) is clicked. Moreover the tables should start unexpanded. I use the following jQuery script:

$(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;}
       });
});

然而，当我只执行的顶级表能够显示/隐藏没有第二个。
任何人都可以看到我要去哪里错了？

However when I execute only the top table is able to show/hide not the second one. Can anyone see where I'm going wrong?

推荐答案

您正在使用多个元素相同的ID。当你按ID搜索，jQuery将只返回一个项目（第一个与该ID）。所以，你的code仅作用于第一个表。在桌子上，而不是ID使用类。

You are using the same id on multiple elements. When you search by id, jQuery will only return one item (the first with that id). So your code is only acting on the first table. Use a class on the tables instead of an 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)"
});

这篇关于使用jQuery显示/隐藏表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！