Vereinfachen mehrere Skript

Question

Bitte helfen Sie mir diesen Code zu vereinfachen ich ein Quiz Artikel, die Sie eine Antwort und die Antwort auswählen, wird anhängen Klasse .response

---

Appology als meine vorherige Frage ist nicht klar. Ich bin neu in jQuery, also ist Ihre Hilfe sehr appreciated.

Hier ist das Szenario, ich habe 28 Sätze von Gruppe Artikel/fieldset unter div id = "scenarioCont". 7 Fieldset für jede div class = "Szenario"

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

Welche Weiter Displays nächsten Fragen auswählen.

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

Und startet Umfrage Berechnung Senden auswählen. Und all die gewählte Antwort sollte in span class = "Antwort"

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

Vielen Dank im Voraus Jungs sehen!

Answer 1

Vor allem muss das id Attribut für jedes HTML-Element eindeutig sein, also müssen Sie das beheben.

Diese einzigartige id wird hilfreich sein, um die Antwort zu erhalten und an der richtigen Stelle anzuhängen.

Sie können Schleife auf allen Radio-Buttons, und wenn einer von ihnen kontrolliert wird, können Sie es Wert auf die <span> hängen, dass es name Attribut der einzigartigen id des <fieldset> gleich ist, die die Frage enthält. Versuchen Sie dies:

$("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); 
    } 

}); 

Ich habe eine Fiddle für Sie gemacht!