簡素化、複数のスクリプト

Question

は、私はあなたが答えを選択して、答えはクラス

---

Appology私の前の質問には明確ではないように.responseに追加しますクイズのアイテムを持って、このコードを簡素化してください。私はjQueryの新機能ですので、あなたの助けがはるかに整っています。

ここでは、div id = "scenarioCont"の下にグループ項目/フィールドセットの28セットがあります。 次ディスプレイの質問の次のセットを選択し、各のdivクラス= "シナリオ"

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

ため 7フィールドセット。

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

そしてが開始ポーリング計算を提出してください選択します。そして、選択したすべての答えは

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

は、事前にみんなにありがとう「レスポンス」= スパンクラスに表示されるはずです！

Answer 1

何かが起きる前に、id属性はすべてのHTML要素で一意でなければならないので、修正する必要があります。

このユニークなidは、応答を得て適切な場所に追加するのに役立ちます。それらのいずれかがチェックされている場合

あなたはすべてのラジオボタンのループ、そして、あなたはそれがname属性は質問が含まれている<fieldset>のユニークidに等しいです<span>に値です追加することができます。これを試してみてください：

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

}); 

私はあなたのためのFiddleを作りました！