javascript - 根据用户输入更改 Accordion 面板的颜色

Question

我有一个 Accordion 小部件可以翻转问题，请参阅 JSFiddle .

如果用户选择特定的单选按钮，我希望 Accordion 改变颜色。用户可以提供四个选项作为答案:是 (Y)、否 (N)、未见 (NS) 和不适用 (NA)。 具体来说，如果用户选择 Y、NS 或 NA - 颜色变为“绿色”；如果 N - 颜色变为“红色”。如果未选中(默认状态)- 没有任何变化。

这是 Accordion 内容的 HTML 代码。

<div id="Q412">
  <table class="QTable">
  <tr>
  <td width="45"  align="left" valign="top" scope="row"><div class="QNumber">4.12</div></td>
  <td width="100%"  align="left" valign="top">
  <div class="QText">Text of the question</div>
  </td>
  </tr>
  </table>
</div>

<div>
  <table class="RTable">
  <tr>
  <td width="100%"  align="left" valign="top" style="padding-right:20px">
   <div class="Guidance"><p>Content of the guidance</p>
   </div>
   </td>

    <td width="550" align="left" valign="baseline">
    <div class="Response">
      <label><input type="radio" name="Radio412" value="Y" id="Radio_412Y" onchange='radioChange(this, "412")'>Yes</label>
            <label><input type="radio" name="Radio412" value="N" id="Radio_412N" onChange='radioChange(this, "412")'>No</label>
            <label><input type="radio" name="Radio412" value="NS" id="Radio_412NS" onChange='radioChange(this, "412")'>Not Seen</label>
            <label><input type="radio" name="Radio412" value="NA" id="Radio_412NA" onChange='radioChange(this, "412")'>Not Applicable</label>
     </div>

     <div id="responseDetails">
     <div class="Observation">
        <label for="observation">Observation:</label>
        <textarea name="observation" id="Obs412" rows="6" disabled style="width: 530px;" placeholder="Enter text of observation here ..."></textarea>
     </div>
     <div id="DueDate">
            <label for="DueDate">Due date:<br></label>
            <input name="DueDate" class="DueDate" type="date" id="DueDate412"/>
        </div>
        <div class="actions">
            <label for="actions">Actions required to correct and/or prevent this observation:</label>
            <textarea name="actions" id="pa412" rows="6" style="width: 530px;"></textarea>
        </div>
        </div>
        </td>
        </tr>
    </table>
    </div>

Accordion 小部件 css 文件包含以下定义默认 Accordion 面板颜色的行:

.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #d3d3d3;background: #e6e6e6; font-weight:normal;color:#555}

我知道它必须是一个相对简单的 JS 代码来激活这个功能但是...... 提前致谢!

Answer 1

您可以使用 jQuery 轻松地向元素添加类。

获取半径元素并添加变化事件。大约:

 $('input[type=radio][name=NameOfRadioInput]').change(function(){
 if (this.value == 'BLAH') {
        $(#YourAccordionElement).addClass("className1").
    }
    else if (this.value == 'BLEH') {
        $(#YourAccordionElement).addClass("className2").
    }

  }