javascript - 如何对多个类进行显示隐藏

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

我建议您为所有类别项添加另一个类，我们称之为类别。然后根据您提供的 CSS 显示的 DOM 结构，我想您可以执行以下操作:

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

编辑

添加了一个使用我的示例的 fiddle ，有两个类别: http://jsfiddle.net/coffe_e/c8Tgf/1/