Question

请帮我简化这段代码我有一个测验项目，您可以选择答案，答案会附加到.response class

Appology如我之前提出的问题尚不清楚。我是jQuery的新手，所以你的帮助很大。

这是一个场景，我在 div id =“scenarioCont”下有28组组项/字段集。每个 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>

选择下一步会显示下一组问题。

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

选择提交即可开始投票计算。所有选定的答案都应显示在 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

在此之前，id属性对于每个HTML元素必须是唯一的，因此您必须解决这个问题。

这个独特的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！

简化多个脚本

1 个答案: