jquery - 在同一页面的多个 id 中运行相同的效果

Question

我需要在同一页面的多个 id 中运行相同的效果执行此操作的快捷方式是什么:

function showDisc1(){$('#bottomBox1').slideDown();$("#bottomBox1").addClass("open");$("#bottomBox1").removeClass("close");}
function showDisc2(){$('#bottomBox2').slideDown();$("#bottomBox2").addClass("open");$("#bottomBox2").removeClass("close");}
function showDisc3(){$('#bottomBox3').slideDown();$("#bottomBox3").addClass("open");$("#bottomBox3").removeClass("close");}
function showDisc4(){$('#bottomBox4').slideDown();$("#bottomBox4").addClass("open");$("#bottomBox4").removeClass("close");}
...... etc

$(document).ready(function() {
$('#openbottomBox1').click(function(){
if ( $('#bottomBox1').hasClass('close') ) {
showDisc1();
} else if ( $('#bottomBox1').hasClass('open') ) {
hideDisc1();
};});});
.... again!!

HTML:

<div class="bottomBox close">
<div class="wrapper">
<a class="left disc" href="javascript:;" id="openbottomBox1"><div class="left text">View Description</div><div class="sprite right"></div></a> | <a class="itemDetails" href="javascript:;" id="itemDetails1">Details</a>
</div>
<p class="close clear discContent" id="bottomBox1"><a href="javascript:;" class="hideDisc" id="hideDisc1">x</a>
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
</p>
</div>

Answer 1

为所有这些框指定一个类名称，并将点击绑定(bind)到该类。

$(document).ready(function() {
   $('.box').click(function(){
       toggleDisc(this);
   });
});

function toggleDisc(that){
   if ($(that).hasClass('close'){
       $(that).slideDown().addClass("open").removeClass("close");
   }else{
       // the other thing
   }
}