有沒有更好的方法來編寫這個jQuery腳本？

所以這個腳本很有用，但看起來很長。我認爲可能有一些捷徑可以使用，也許可以使用數組？但我是JS的新手，在jQuery方面真的很新穎。有沒有更好的方法來編寫這個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>

這裏的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>

來源

2010-01-22 tahdhaze09

使用它來代替任何的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(); 
    }); 
});

來源

2010-01-22 14:52:47

+1非常好，我需要刷上的CSS更有效 – 2010-01-22 14:56:48

！ – tahdhaze09 2010-01-22 15:36:39

這工作得很好！謝謝，道格。感謝大家回答！ – tahdhaze09 2010-01-22 16:26:43

像

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

你也可以修改您的標記部分，並使用jQuery UI的手風琴：

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

來源

2010-01-22 14:50:58

給你的DIV一個普通的類，並使用id來標識，即代替所有的id，只在頂層div上有一個id，然後在子Ids上有泛型類名。也避免使用& nbsp;和< 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"); 
     }); 
    });

弗雷德

來源

2010-01-22 15:08:54 fredw

有沒有更好的方法來編寫這個jQuery腳本？

回答

相關問題