Existe-t-il un meilleur moyen d'écrire ce script jQuery?

Donc, le script fonctionne, mais il semble assez long. Je pense qu'il peut y avoir quelques raccourcis que je pourrais prendre, peut-être utiliser un tableau? Mais je suis nouveau chez JS, et vraiment nouveau chez jQuery.Existe-t-il un meilleur moyen d'écrire ce script jQuery?

Ce qu'il fait:

J'ai une liste de dix questions, et je veux prendre un graphique (signe plus) et l'activer quand on clique sur un signe moins. Il révélera également la réponse en utilisant une bascule à glissière.

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

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

Voici le code 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>

Source

2010-01-22 tahdhaze09

Utilisez ce lieu de l'un des jQuery que vous avez posté:

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

En outre, vous devriez vraiment consolider vos Des classes. Je voudrais utiliser ce modèle HTML mis à jour pour toutes vos 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>

Votre CSS suivraient ce formulaire:

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

Et puis j'utiliser cette jQuery légèrement mise à jour:

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

Source

2010-01-22 14:52:47

+1 très agréable et efficace –

je dois rafraîchir le CSS plus! – tahdhaze09

Cela a bien fonctionné! Merci, Doug. Merci à tous ceux qui ont répondu! – tahdhaze09

quelque chose comme

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

vous pouvez également modifier votre balisage certains et utiliser l'accordéon ui jquery:

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

Source

2010-01-22 14:50:58

Donnez à vos DIV une classe commune et utilisez des ID pour l'identification, c'est-à-dire, au lieu de tous les ID sur tout, ayez simplement un ID sur le div de niveau supérieur, puis des noms de classe génériques sur les ID enfants. Évitez également d'utiliser & nbsp; et < br/> tags, mais faites-le avec padding/marges CSS à la place. Quelque chose le long de ces lignes:

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

Ceci simplifiera également votre CSS. Utilisez simplement les noms de classe communs au lieu d'énumérer toutes les questions.

En général, vous avez juste besoin d'utiliser jQuery sur les noms de classe et il se connectera à tous vos éléments. Dans un gestionnaire de clics jQuery, vous avez rarement besoin d'utiliser les identifiants des éléments, vous pouvez utiliser $ (this) pour obtenir l'élément en cours, puis utiliser les fonctions de déplacement pour obtenir les éléments associés. Comme ceci:

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

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

Fred

Source

2010-01-22 15:08:54 fredw

Existe-t-il un meilleur moyen d'écrire ce script jQuery?

Répondre

Questions connexes