JQuery 表显示头部，当悬停显示正文时，单击显示正文.需要许多表

Question

我有这段代码在工作，但希望它能够添加更多表格，我不必继续添加所有这些部分和格式。

请参阅此处的示例：http://jsfiddle.net/QtMK2/120/我希望单击和切换函数的行为与它们在示例中的行为完全相同。

我

只是希望能够拥有它，以便在添加更多表时，我不必为每个新表添加所有函数。

那么有没有办法做到这一点，以便它使用 (this( 变量只作用于该表？

-JQuery

$(document).ready(function(){   
var clicked1 = false; //Used tp keep tr from closing
var clicked2 = false; //Used to Keep tr from closing
//Table1 Hover
$('.ActiveDeMolayTableAwards1 th.AwardsDeMolayHead1') .hover(function(){
if(!clicked1) {                
 $('.ActiveDeMolayTableAwards1 tr.AwardsDeMolayBody1').toggle();         
}});
 //Table2 Hover 
$('.ActiveDeMolayTableAwards2 th.AwardsDeMolayHead2') .hover(function(){         
if(!clicked2) {         
  $('.ActiveDeMolayTableAwards2 tr.AwardsDeMolayBody2').toggle();         
}});
 //Table1 Click    
 $('.ActiveDeMolayTableAwards1 th.AwardsDeMolayHead1').click(function(){         
        if(!clicked1) {return clicked1 = true;  
                      $('.ActiveDeMolayTableAwards1 tr.AwardsDeMolayBody1').show(); }
          if(clicked1) {return clicked1 = false;  
                      $('.ActiveDeMolayTableAwards1 tr.AwardsDeMolayBody1').hide(); }
});
  //Table2 Click 
  $('.ActiveDeMolayTableAwards2 th.AwardsDeMolayHead2').click(function(){         
        if(!clicked2) {return clicked2 = true;  
                      $('.ActiveDeMolayTableAwards2 tr.AwardsDeMolayBody2').show(); }
          if(clicked2) {return clicked2 = false;  
                      $('.ActiveDeMolayTableAwards2 tr.AwardsDeMolayBody2').hide(); }
 });       

//LOAD CLOSED
$('.ActiveDeMolayTableAwards1 tr.AwardsDeMolayBody1')  .hide();
$('.ActiveDeMolayTableAwards2 tr.AwardsDeMolayBody2')  .hide();
 }); 

Answer 1

对不起，我时间紧迫，从我的头脑中做到这一点。但是，与其逐个指定每个表和th，不如只引用它们，然后在函数中引用$(this(吗？例如，制作如下选择器：

$('table[class^="ActiveDeMolayTableAwards"] th[class^="AwardsDeMolayHead"]')

例如，这意味着选择所有以"ActiveDeMolayTableAwards"开头的类的表。

另一件事是使用 .live(( 函数而不是 document.ready((，因为 live(( 会对动态添加的表做出反应并包含它们。

Answer 2

使所有表元素相同。 并在每个范围内进行操作。 在这里，我使用了一个"stayOn"类来跟踪"单击状态">

http://jsfiddle.net/Et6XX/