0

このコードは機能していますが、テーブルを追加するときに、これらすべてのセクションとフォーマットを追加し続ける必要がないようにしたいと考えています。

ここで例を参照してください: 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();
 });
4

2 に答える 2

0

申し訳ありませんが、時間が足りず、頭からやっています。しかし、すべてのテーブルと1つを1つずつ指定する代わりに、それらすべてを参照して、関数で$（this）を参照することはできませんか？たとえば、次のようなセレクタを作成します。

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

これは、たとえば「ActiveDeMolayTableAwards」で始まるクラスを持つすべてのテーブルを選択することを意味します。

もう1つの方法は、document.ready（）ではなく.live（）関数を使用することです。これは、live（）が動的に追加されたテーブルに反応し、それらも含めるためです。

于 2012-05-18T19:56:33.467 に答える
0

すべてのテーブル要素を同じクラスにします。各スコープ内で操作します。ここでは、「stayOn」クラスを使用して「クリック状態」を追跡しました

http://jsfiddle.net/Et6XX/

于 2012-05-18T20:00:02.747 に答える