Forum : jQuery : Boucle pour alléger mon code

Bonjour,

J'ai crée un petit quizz et je souhaiterai créer une boucle pour alléger mon code. Mais voilà, j'ai deux variables qui me posent problème.

Ce je fais

Voici mon HTML :

<form> <a href="">Tester les réponses</a> <div class="question"> <div class="texte"> <h2>Question 1</h2> <p>Les couleurs du drapeau français sont :</p> <input type="radio" id="r1" name="q1"/>Vert - blanc - rouge<br/> <input type="radio" id="r2" name="q1"/>Rouge - blanc - rouge<br/> <input type="radio" id="r3" name="q1"/>Bleu - blanc - rouge<br/> <br/> <span class="reponse" id="reponse1">Réponse : Les trois couleurs du drapeau français sont bleu blanc rouge. Le blanc signifiant la couleur du roi, et le bleu et rouge sont les couleurs de Paris.</span> </div> <img id="img1" src="img/question.png" /> </div> <div class="question"> <div class="texte"> <h2>Question 2</h2> <p>La capitale de la Belgique est :</p> <input type="radio" id="r4" name="q2"/>Bruxelles<br/> <input type="radio" id="r5" name="q2"/>Madrid<br/> <input type="radio" id="r6" name="q2"/>Berlin<br> <br> <span class="reponse" id="reponse2">Réponse : C'est Bruxelles. Madrid est la capitale de l'Espagne. Quant à Berlin, c'est la capitale de l'Allemagne.</span> </div> <img id="img2" src="img/question.png" /> </div> <div class="question"> <div class="texte"> <h2>Question 3</h2> <p>Quelle était la couleur du cheval blanc d'Henri IV ?</p> <input type="radio" id="r7" name="q3"/>Brune<br/> <input type="radio" id="r8" name="q3"/>Grise et poivrée<br/> <input type="radio" id="r9" name="q3"/>Blanche<br/> <br/> <span class="reponse" id="reponse3">Réponse : Blanche, la réponse est dite dans la question.</span> </div> <img id="img3" src="img/question.png" /> </div> </form>

Et mon code en jQuery

'use strict'; var reponse = $('.reponse'); var question = $('.question'); var test = $('a'); var img = $('img'); $(function() { reponse.hide(); test.hover( function() { // Les instructions à exécuter au survol du lien $('.reponse').slideDown(); img.hide(); if ($(':radio[id="r3"]:checked').val()) { $(question[0]).addClass('green'); } else { $(question[0]).addClass('red'); } if ($(':radio[id="r4"]:checked').val()) { $(question[1]).addClass('green'); } else { $(question[1]).addClass('red'); } if ($(':radio[id="r9"]:checked').val()) { $(question[2]).addClass('green'); } else { $(question[2]).addClass('red'); } }, function() { // Les instructions à exécuter lorsque le lien n'est plus survolé reponse.slideUp(); question.removeClass('red green'); img.queue(function() { setTimeout(function() { img.dequeue(); }, 400); img.fadeIn(); }); } ); });

### Ce que je veux J'ai une boucle avec beaucoup de "if" et de "else" pour dire quasiment la même chose. J'ai tenté d'utiliser un "each" mais rien n'y fait. Je pense que cela est dû à deux variables : - l'index de "question". - l'id appelé dans la condition.

jQuery : Boucle pour alléger mon code

Ce je fais

5 réponses