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

Question

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

tah*_*e09 1 html javascript css jquery shortcut

所以脚本有效,但看起来很长.我想可能有一些我可以采取的捷径,也许使用数组？但我是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>

Run Code Online (Sandbox Code Playgroud)

这是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>

Run Code Online (Sandbox Code Playgroud)

这是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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dou*_*ner 13

使用它而不是你发布的任何jQuery:

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

Run Code Online (Sandbox Code Playgroud)

另外,你真的应该巩固你的课程.我将使用此更新的HTML模式来解决您的所有问题:

<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>

Run Code Online (Sandbox Code Playgroud)

您的CSS将遵循以下形式:

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

Run Code Online (Sandbox Code Playgroud)

然后我会使用这个稍微更新的jQuery:

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Joh*_*ker 9

就像是

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

Run Code Online (Sandbox Code Playgroud)

你也可以修改你的标记并使用jquery ui手风琴:

http://docs.jquery.com/UI/Accordion

归档时间：	15 年，9 月前
查看次数：	238 次
最近记录：	15 年，9 月前