jQueryで1つの機能を持つ別のオブジェクトをクリックして複数の要素を切り替える

Question

私は9つの画像と9つのテーブルを持っています。各画像は、それが関係するテーブルをトグルさせる「ボタン」として機能します。表は最初はdisplay：noneで隠されているので、画像1をクリックすると表1が表示されますが、画像1をクリックすると表2-9もすべて同じ場所に表示されるため隠されます。他のものが隠されていない場合は、クリックするとその表が切り替わり、下に表示されます。

これがそうのように見える達成するための基本的なコード：私は、各画像のクリック機能のためにこれを繰り返していることを除いて

$('#img1').click(function(){ 
    $('#tbl2, #tbl3, #tbl4, #tbl5, #tbl6, #tbl7, #tbl8, #tbl9').hide(); 
    $('#tbl1').toggle('fast'); 
}); 

が。私がしたいのは、機能が何か設定されているため、非常に冗長であるため、このコードを大幅に単純化することができます。助言がありますか？

Answer 1

：

<img src="..." class="btn" title="1" /> 
<img src="..." class="btn" title="2" /> 
//... 
<div id="info"> 
    <table id="table1"></table> 
    <table id="table2"></table> 
</div> 

次のように今、私は、関数を記述します。

は次のようになります。このコードを使用して作業してください。多分それは将来他の誰かを助けるでしょう。

$("#contianer img").click(function() { 
    $('#tbl1_img, #tbl2_img, #tbl3_img, #tbl4_img, #tbl5_img, #tbl6_img, #tbl7_img, #tbl8_img, #tbl9_img').removeClass('selected'); 
    $(this).addClass('selected'); 
    var tblToShow = $(this).attr('id').replace('_img', ''); 
    $('#tbl1, #tbl2, #tbl3, #tbl4, #tbl5, #tbl6, #tbl7, #tbl8, #tbl9').addClass('hidden').removeClass('fadeIn'); 
    $('#'+tblToShow).toggleClass('hidden'); 
    $('#'+tblToShow).addClass('fadeIn'); 
}); 

Answer 2

あなたはすべての要素のための単一のクラスを設定し、

<div id="tbl2" class="table"></div> 
<div id="tbl3" class="table"></div> 
<div id="tbl4" class="table"></div> 

$(".table").hide(); 

シャイそれらを完全に隠すことができます。

Answer 3

すべての画像にクラスを追加してみてください。たとえば、btnとtitle="1"というようなタグがあります。すべてのテーブルをIDのinfoのdivに入れてください。私はこれを得た、これは正しい方向にあなたをリードし

$('.btn').click(function(){ 
    //hide all the tables 
    $('#info table').hide(); 
    //get the title 
    var t = $(this).attr('title'); 
    //assuming a table is called "table1" 
    $('#table'+t).fadeIn(); 
}); 

ホープ:)