Javascript 有没有更好的方法来编写这个jQuery脚本？

所以剧本是可行的，但看起来很长。我想我可以走一些捷径，也许使用数组？但我对JS是新手，对jQuery也是新手

它的作用是：

我有一个十个问题的列表，我想拿一个图形（加号）并在单击减号时切换它。它还将通过使用滑动切换来显示答案

代码如下：

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">                                         
   $(document).ready(function() {
   $(".divOne").hide();
   $(".divTwo").hide();
   $(".divThree").hide();
   $(".divFour").hide();
   $(".divFive").hide();
   $(".divSix").hide();
   $(".divSeven").hide();
   $(".divEight").hide();
   $(".divNine").hide();
   $(".divTen").hide();

    $(".bbone").click(function(){
     $(".divOne").slideToggle("slow");
     $("#button1").toggleClass("down");
     });

     $(".bbtwo").click(function(){
     $(".divTwo").slideToggle("slow");
     $("#button2").toggleClass("down");
     });

     $(".bbthree").click(function(){
     $(".divThree").slideToggle("slow");
     $("#button3").toggleClass("down");
     });

     $(".bbfour").click(function(){
     $(".divFour").slideToggle("slow");
     $("#button4").toggleClass("down");
     });

     $(".bbfive").click(function(){
     $(".divFive").slideToggle("slow");
     $("#button5").toggleClass("down");
     });

     $(".bbsix").click(function(){
     $(".divSix").slideToggle("slow");
     $("#button6").toggleClass("down");
     });

     $(".bbseven").click(function(){
     $(".divSeven").slideToggle("slow");
     $("#button7").toggleClass("down");
     });

     $(".bbeight").click(function(){
     $(".divEight").slideToggle("slow");
     $("#button8").toggleClass("down");
     });

     $(".bbnine").click(function(){
     $(".divNine").slideToggle("slow");
     $("#button9").toggleClass("down");
     });

     $(".bbten").click(function(){
     $(".divTen").slideToggle("slow");
     $("#button10").toggleClass("down");
     });

 });                                   
</script>

$（文档）.ready（函数（）{
$（“.divOne”）.hide（）；
$（“.divTwo”）.hide（）；
$（“.divThree”）.hide（）；
$（“.divFour”）.hide（）；
$（“.divFive”）.hide（）；
$（“.divSix”）.hide（）；
$（“.divSeven”）.hide（）；
$（“.divEight”）.hide（）；
$（“.divNine”）.hide（）；
$（“.divTen”）.hide（）；
$（“.bbone”）。单击（函数（）{
$（“.divOne”）。滑动切换（“慢速”）；
$（“#按钮1”）。切换类别（“向下”）；
});
$（“.bbtwo”）。单击（函数（）{
$（“.divTwo”）。滑动切换（“慢速”）；
$（“#按钮2”）。切换类别（“向下”）；
});
$（“.bbthree”）。单击（函数（）{
$（“.divThree”）。滑动切换（“慢速”）；
$（“#按钮3”）。切换类别（“向下”）；
});
$（“.bbfour”）。单击（函数（）{
$（“.divFour”）。滑动切换（“慢速”）；
$（“#按钮4”）。切换类别（“向下”）；
});
$（“.bbfive”）。单击（函数（）{
$（“.div5”）。滑动切换（“慢速”）；
$（“#按钮5”）。切换类别（“向下”）；
});
$（“.bbsix”）。单击（函数（）{
$（“.divSix”）。滑动切换（“慢速”）；
$（“#按钮6”）。切换类别（“向下”）；
});
$（“.bbs偶”）。单击（函数（）{
$（“.divSeven”）。滑动切换（“慢速”）；
$（“#按钮7”）。切换类别（“向下”）；
});
$（“.bbeight”）。单击（函数（）{
$（“.divEight”）。滑动切换（“慢速”）；
$（“#按钮8”）。切换类别（“向下”）；
});
$（“.bbnine”）。单击（函数（）{
$（“.divNine”）。滑动切换（“慢速”）；
$（“#按钮9”）。切换类别（“向下”）；
});
$（“.bbten”）。单击（函数（）{
$（“.divTen”）。滑动切换（“慢速”）；
$（“#按钮10”）。切换类别（“向下”）；
});
});                                   

以下是CSS：

<style type="text/css">
body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.divOne, .divTwo, .divThree, .divFour, .divFive, .divSix, .divSeven, .divEight, .divNine, .divTen
{
border:1px solid #CC0000;
background-color:#efefef;
width:580px;
margin-top:5px;
font-size:10px;
padding:5px;
clear:left;
}
.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten
{
padding-left:10px;
text-decoration:none;
color:#CC0000;
font-variant:small-caps;
font-size:14px;
}
.bbone, .bbtwo, .bbthree, .bbfour, .bbfive, .bbsix,.bbseven,.bbeight,.bbnine,.bbten
{
vertical-align:middle;
}
.question
{
height:auto;
background-color:#fff;
margin-bottom:10px;
width:800px;
}
p {
margin:0;
padding:0;
float:left;
width:16px;
height:16px;
background-image:url(images/add.png);
background-repeat:no-repeat;       
    }

p.down {
float:left;
width:16px;
height:16px;
background-image:url(images/delete.png);
background-repeat:no-repeat;
    }

.wwwLink
{
padding-left:20px;
background: transparent url(images/world_go.png) no-repeat center left;
}
</style>

身体
{
字体系列：Verdana、Arial、Helvetica、无衬线；
}
.divOne、.div2、.div3、.div4、.div5、.div6、.div7、.div8、.div9、.divTen
{
边框：1px实心#CC0000；
背景色：#EFEF；
宽度：580px；
边缘顶部：5px；
字体大小：10px；
填充物：5px；
清除：左；
}
一、二、三、四、五、六、七、八、九、十
{
左侧填充：10px；
文字装饰：无；
颜色：#CC0000；
字体变体：小大写字母；
字体大小：14px；
}
.bbone、.bbtwo、.bbthree、.bbfour、.bbfive、.bbsix、.bb偶数、.bbeight、.bbnine、.bbten
{
垂直对齐：中间对齐；
}
问题
{
高度：自动；
背景色：#fff；
边缘底部：10px；
宽度：800px；
}
p{
保证金：0；
填充：0；
浮动：左；
宽度：16px；
高度：16px；
背景图片：url（images/add.png）；
背景重复：无重复；
}
p、 向下{
浮动：左；
宽度：16px；
高度：16px；
背景图片：url（images/delete.png）；
背景重复：无重复；
}
.wwLink
{
左侧填充：20px；
背景：透明url（images/world_go.png）不在中间偏左重复；
}

以下是HTML：

<body>
<div class="question">
<p id="button1" class="bbone">&nbsp;</p><a href="#" class="one">Myth No. 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. .&nbsp;</a><br/>
<div class="divOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. 
<a href="http://stackoverflow.com/questions/ask" class="wwwLink"  target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button2" class="bbtwo">&nbsp;</p><a href="#" class="two">Myth No. 2:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/> 
<a href="http://stackoverflow.com/questions/ask" class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button3" class="bbthree">&nbsp;</p><a href="#" class="three">Myth No. 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divThree">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button4" class="bbfour">&nbsp;</p><a href="#" class="four">Myth No. 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divFour">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button5" class="bbfive">&nbsp;</p><a href="#" class="five">Myth No. 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divFive">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.  <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button6" class="bbsix">&nbsp;</p><a href="#" class="six">Myth No. 6:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divSix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.  <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button7" class="bbseven">&nbsp;</p><a href="#" class="seven">Myth No. 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divSeven">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. 
</div>
</div>

<div class="question">
<p id="button8" class="bbeight">&nbsp;</p><a href="#" class="eight">Myth No. 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divEight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. 
</div>
</div>

<div class="question">
<p id="button9" class="bbnine">&nbsp;</p><a href="#" class="nine">Myth No. 9: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divNine">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.  <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button10" class="bbten">&nbsp;</p><a href="#" class="ten">Myth No. 10: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divTen">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.  <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>
<body>

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam。


Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam




Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam




Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam




Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam




Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam




Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam。


Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam。


Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam




Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常重要的问题。这是一个非常有趣的故事。Nam tincidunt Elite vitae quam

类似

$(document).ready(function(){
    $('.question div').hide();
    $('.question p').click(function(){
        $(this).next('div').slideToggle("slow");
        $(this).addClass('down');
    });
});

您还可以修改一些标记并使用jquery ui accordion：

<

$(document).ready(function() {
  $('div.question')
    .children('div').hide().end()
    .children('p').click(function(){
      $(this).toggleClass('down').next().slideToggle("slow");
    });
});

<div class="question">
  <p class="button">&nbsp;<a href="#">Myth No. 2:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a></p>
  <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/> 
  <a href="http://stackoverflow.com/questions/ask" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
  </div>
</div>

.question       { }
.button         { } /* Instead of bbOne, bbTwo, etc*/
.question div   { } /* Instead of divOne, divTwo, etc */
.question div a { } /* Instead of wwwLink */

$(document).ready(function() {
  $('div.question')
    .children('div').hide().end()
    .find('p > a').click(function(e){
      $(this)
        .parent().toggleClass('down')
        .next().slideToggle("slow");
      e.preventDefault();
    });
});

<div class="question" id="question1">
   <div class="questionText">
      <p class="questionButton"></span>
      <a href="#">Myth No. 1: ...</a>
   </div>
   <div class="questionAnswer">
       ...
   </div>
</div>

   $(document).ready(function() {
       $(".questionAnswer").hide();

       $(".questionButton").click(function(){
           $(this).parent().find(".questionAnswer").slideToggle("slow");
           $(this).toggleClass("down");
       });
   });