javascript - この jQuery スクリプトを記述するより良い方法はありますか?

Question

スクリプトは機能しますが、かなり長いようです。私が取ることができるいくつかのショートカットがあるかもしれないと思います.多分配列を使用しますか? しかし、私は JS は初めてで、jQuery は本当に初めてです。

機能:

10 個の質問のリストがあり、グラフィック (プラス記号) を取得し、クリックするとマイナス記号に切り替えたいと考えています。また、スライドトグルを使用して答えを表示します。

コードは次のとおりです。

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

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>

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>

score 13 · Accepted Answer

投稿したjQueryの代わりにこれを使用してください：

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

また、クラスを統合する必要があります。私はあなたのすべての質問にこの更新された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>

CSSは次の形式に従います。

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

そして、このわずかに更新された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();
    });
});

score 9 · Accepted Answer

何かのようなもの

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

マークアップをいくつか変更して、jqueryuiアコーディオンを使用することもできます。

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

score 1 · Accepted Answer

DIV に共通のクラスを与え、id を使用して識別します。つまり、すべてのすべての id の代わりに、最上位の div に 1 つの id を持ち、子 ID に汎用クラス名を付けます。また、の使用も避けてください。および <br/> タグを使用しますが、代わりに CSS パディング/マージンを使用してください。これらの行に沿ったもの：

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

これにより、CSS も簡素化されます。すべての質問を列挙する代わりに、一般的なクラス名を使用してください。

一般に、クラス名に jQuery を使用するだけで、すべての要素にアタッチされます。また、jQuery クリックハンドラーでは、要素の ID を使用する必要はほとんどありません。$(this) を使用して現在の要素を取得し、トラバース関数を使用して関連する要素を取得できます。このような：

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

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

フレッド

javascript - この jQuery スクリプトを記述するより良い方法はありますか?

3 に答える 3

Related

Reference