Simplifier scripts multiples

Question

S'il vous plaît aider moi de simplifier ce code J'ai un élément de jeu-questionnaire qui vous sélectionnez une réponse et la réponse ajoutera à .response classe

---

que ma question excuses précédente est pas claire. Je suis nouveau dans jQuery donc votre aide est très appréciée.

Voici le scénario, j'ai 28 ensembles de groupe d'articles/fieldset sous div id = "scenarioCont". 7 fieldsets pour chaque div class = "scénario"

<div id="scenarioCont"> 
    <div class="scenario"> 
     <fieldset id="group1"> 
      <p>Question #1 </p> 
      <p><input type="radio" class="scenarioRadio" value="Strongly agree" name="group1" /><label>Strongly agree </label></p> 
      <p><input type="radio" class="scenarioRadio" value="Somewhat agree" name="group1" /><label>Somewhat agree </label></p> 
      <p><input type="radio" class="scenarioRadio" value="Neither agree or disagree" name="group1" /><label>Neither agree or disagree</label></p> 
      <p><input type="radio" class="scenarioRadio" value="Somewhat disagree" name="group1" /><label>Somewhat disagree</label></p> 
      <p><input type="radio" class="scenarioRadio" value="Strongly disagree" name="group1" /><label>Strongly disagree </label></p> 
      <p><input type="radio" class="scenarioRadio" value="Don’t know/Can’t say" name="group1" /><label>Don’t know/Can’t say</label></p> 
     </fieldset> 

     <fieldset id="group2"> 
      <p>Question #1</p> 
      <p><input type="radio" class="scenarioRadio" value="Yes, always" name="group2" /><label>Yes, always </label></p> 
      <p><input type="radio" class="scenarioRadio" value="Yes, usually" name="group2" /><label>Yes, usually</label></p> 
      <p><input type="radio" class="scenarioRadio" value="Yes, sometime" name="group2" /><label>Yes, sometimes </label></p> 
      <p><input type="radio" class="scenarioRadio" value="No" name="group2" /><label>No</label></p> 
      <p><input type="radio" class="scenarioRadio" value="Don’t know" name="group2" /><label>Don’t know</label></p> 
     </fieldset> 

     <fieldset id="group6">...</fieldset> 
     <fieldset id="group7">...</fieldset> 
    </div> 

    <div class="scenario"> 
     <fieldset id="group8">...</fieldset> 
     ... 
     <fieldset id="group14">...</fieldset> 
    </div> 



    <button type="button" style="float:left;" class="buttonStyle" id="prevScenario" disabled="true">Back</button> 
    <button type="button" style="float:right;" class="buttonStyle" id="nextScenario" disabled="true">Next</button> **will change to submit after the last slide/panel item 
</div> 

qui sélection suivante affiche prochaine série de questions.

<button type="button" style="float:right;" class="buttonStyle" id="nextScenario" disabled="true">Submit</button> 

et en sélectionnant commence le calcul Soumettre sondage. Et la réponse choisie devrait afficher dans span class = « réponse »

<table id="resultsTable"> 
    <tr id="group1"> 
     <td class="responseCell"><span class="response">(the answer in group 1 should display here)</span></td> 
    </tr> 

    <tr id="group2"> 
     <td class="responseCell"><span class="response">(the answer in group 2 should display here)</span></td> 
    </tr> 

    ..... 
</table> 

Nous vous remercions d'avance les gars en!

Answer 1

Avant tout, l'attribut id doit être unique pour chaque élément HTML, vous devez donc corriger cela.

Cet unique id sera utile pour obtenir la réponse et l'ajouter au bon endroit.

Vous pouvez en boucle sur tous les boutons radio, et si l'un d'eux est cochée, vous pouvez ajouter sa valeur à la <span> qu'il est name attribut est égal à la id unique du <fieldset> qui contient la question. Essayez ceci:

$("input[type='radio']").change(function() { 

    var $this = $(this); 
    if ($this.prop('checked')) { 
     value = $this.val(); 
     question = $this.parent("fieldset").attr('id'); 
     $('span[name='+question+']').text(value); 
    } 

}); 

J'ai fait un Fiddle pour vous!