简化多个脚本

Question

请帮助我简化此代码我有一个测验项目，您 select 一个答案，答案将附加到 .response class

抱歉我之前的问题不清楚。我是 jQuery 的新人，非常感谢您的帮助。

场景是这样的，我在div id="scenarioCont"下有28组item/fieldset。每个 div class="scenario"

7 个字段集

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

selecting Next 显示下一组问题。

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

并且 selecting 提交开始投票计算。所有 selected 的答案应该显示在 span class="response"

<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

首先，每个 HTML 元素的 id 属性必须是唯一的，因此您必须解决这个问题。

独特的 id 将有助于获得响应并将其附加到正确的位置。

您可以在所有单选按钮上循环，如果其中任何一个被选中，您可以将它的值附加到 <span>，它的 name 属性等于唯一的 id 包含问题的 <fieldset>。试试这个：

$("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！

简化多个脚本

Simplify multiple script

arrays

jquery

simplify