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)"
});

Answer 2

更简单的方法是使用类而不是table值的id。通过这种方式，他们可以更轻松地被称为一个群体

<table class="film"> ...

之后，以下jquery应该为您提供您正在寻找的行为

$(document).ready(function() {
    $('.film td').hide();
    $('th').click(function() {
       $(this).parents('table').find('td').toggle();
    }); 
});

小提琴：http://jsfiddle.net/WZUAZ/1/

Answer 3

以下是工作版本：http://jsfiddle.net/6Ccj7/

你的HTML坏了。改变这个：

<td class"2">//BODY CONTENT 2//</td>

对此：

<td class="2">//BODY CONTENT 2//</td>

此外，您使用了film的id，而实际上您有2个实例。你改为上课：

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

这是更新的JS：

$(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 4

两个问题：
首先，您的HTML已损坏变化

 <td class"2">//BODY CONTENT 2//</td>

要

 <td class="2">//BODY CONTENT 2//</td>

其次，HTML id应该是唯一的，所以我建议使用类。

以下是一个工作示例：http://jsfiddle.net/jkohnen/tBkh4/

我使用.toggle（）来简化jQuery

希望有所帮助，以及快乐编码。

Answer 5

使用jquery显示/隐藏表

代码here ! 我使用slideToggle + data attr

Answer 6

使用这个jQuery你可以显示＆amp;隐藏

<button id="hide">Hide</button>
<button id="show">Show</button>

HTML

{{1}}

使用jQuery显示/隐藏表

6 个答案: