开发者

Is there a better way to write this jQuery script?

开发者 https://www.devze.com 2022-12-17 01:16 出处:网络
S开发者_如何转开发o the script works, but it seems pretty long. I think there may be some shortcuts I could take, maybe use an array? But I\'m new at JS, and really new at jQuery.

S开发者_如何转开发o the script works, but it seems pretty long. I think there may be some shortcuts I could take, maybe use an array? But I'm new at JS, and really new at jQuery.

What it does:

I have a list of ten questions, and I want to take a graphic (plus sign) and toggle it when clicked to a minus sign. It will also reveal the answer by using a slide toggle.

Here's the code:

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

Here's the 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>

Here's the 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>


Use this instead of any of the jQuery you posted:

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

Also, you really should consolidate your classes. I would use this updated HTML pattern for all your questions:

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

Your CSS would follow this form:

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

And then I would use this slightly updated 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();
    });
});


something like

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

you could also modify your markup some and use the jquery ui accordion:

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


Give your DIVs a common class and use id's for identification, i.e. instead of all the ids on everything, just have one id on the top-level div, and then generic class names on child Ids. Also avoid using &nbsp; and <br/> tags, but do it with CSS padding/margins instead. Something along these lines:

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

This will also simplify your CSS. Just use the common class names instead of enumerating all the questions.

In general you just need to use jQuery on the class names and it will attach itself to all your elements. Also in a jQuery click handler you rarely need to use the ids of elements, you can use $(this) to get the current element and then use traversing functions to get associated elements. Like this:

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

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

Fred

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号