[英]Is there a better way to write this jQuery script?
因此該腳本可以運行,但是看起來很長。 我認為可能有些捷徑可以使用,也許使用數組? 但是我是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>
這是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"> </p><a href="#" class="one">Myth No. 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. . </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"> </p><a href="#" class="two">Myth No. 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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"> </p><a href="#" class="three">Myth No. 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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"> </p><a href="#" class="four">Myth No. 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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"> </p><a href="#" class="five">Myth No. 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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"> </p><a href="#" class="six">Myth No. 6: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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"> </p><a href="#" class="seven">Myth No. 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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"> </p><a href="#" class="eight">Myth No. 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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"> </p><a href="#" class="nine">Myth No. 9: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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"> </p><a href="#" class="ten">Myth No. 10: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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>
使用它代替您發布的任何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"> <a href="#">Myth No. 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </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();
});
});
就像是
$(document).ready(function(){
$('.question div').hide();
$('.question p').click(function(){
$(this).next('div').slideToggle("slow");
$(this).addClass('down');
});
});
您還可以修改標記,並使用jQuery ui手風琴:
為您的DIV提供一個通用類,並使用ID進行識別,即,不是在所有內容上使用所有ID,而是在頂級div上使用一個ID,然后在子ID上使用通用類名稱。 還要避免使用&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 click處理程序中,您很少需要使用元素的id,可以使用$(this)獲取當前元素,然后使用遍歷函數獲取關聯的元素。 像這樣:
$(document).ready(function() {
$(".questionAnswer").hide();
$(".questionButton").click(function(){
$(this).parent().find(".questionAnswer").slideToggle("slow");
$(this).toggleClass("down");
});
});
弗雷德
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.