複数のクラスのためにshow hideを行うには

Question

私は同じカテゴリで同じコードを使って同じことをする必要があるので、複数のカテゴリのコンテナを使うための最短フォーマットを提案できます。

例：私のシンボルが一つのカテゴリであるので、私は「私のドル

のjQuery

$('.my-symbols .show').click(function(){ 
$('.my-symbols .container').show(500); 
}); 
$('.my-symbols .hide').click(function(){ 
$('.my-symbols .container').hide(300); 
}); 

CSS

#charts .my-symbols{ 
width:59%; 
float:left; 
margin-left:0.5%; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
background:#666666; 
padding:0.5%; 
} 
#charts .my-symbols .show{ 
width:10px; 
height:10px; 
background:url(../../images/blockopen.png) no-repeat; 
float:right; 
/*padding:10px 10px 10px 10px;*/ 
border:none; 
top:-10px; 
padding:10px 10px 10px 10px; 
position:relative; 
} 
#charts .my-symbols .hide{ 
width:10px; 
height:10px; 
background:url(../../images/blockclose.png) no-repeat; 
position:relative; 
top:0; 
right:0; 
float:right; 
padding:10px 10px 10px 10px; 
border:none; 
} 
#charts .my-symbols .container{ 
display:none; 
position:absolute; 
padding:1%; 
background:#454545; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
z-index:1; 
} 

Answer 1

ある別のカテゴリIのために、このような方法を行う必要がありますすべてのカテゴリ項目に別のクラスを追加することをお勧めします。カテゴリを呼び出すことができます。あなたが提供したCSSによって明らかにされたDOM構造に基づいて、あなたは次のようにすることができます：

$('.category .show').click(function(){ 
    $(this).parents(".category").find(".container").show(500); 
}); 
$('.category .hide').click(function(){ 
    $(this).parents(".category").find(".container").hide(300); 
}); 

編集

追加した2つのカテゴリに、私の例を使用していますフィドル： http://jsfiddle.net/coffe_e/c8Tgf/1/