Question

我有一个手风琴小部件正在努力翻转问题，请参阅JSFiddle。

如果用户选择特定的单选按钮，我希望手风琴能够改变颜色。用户可以提供四种选择作为答案：是（Y），否（N），未看到（NS）和不适用（NA）。具体来说，如果用户选择Y，NS或NA - 颜色变为“绿色”;如果N - 颜色变为“红色”。如果未选择（默认状态） - 则不会更改。

以下是手风琴内容的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 widget css文件包含以下定义默认折叠面板颜色的行：

.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轻松地向元素添加类。

获取radius元素并添加更改事件。 APROX：

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

  }

Answer 2

将类添加到.css文件中，如

.classGreen { 
color: green 
} 

.classRed { 
color: red 
}

然后重新修改js代码：

if (this.value == 'Y') {
        $(.questions).addClass("classGreen");
}
else if (this.value == 'N') {
        $(.questions).addClass("classRed");
}

然后你必须删除添加的样式类，当你想删除那些绿色/红色时，使用removeClass（“classGreen”）/ etc ...或者使用toggleClass（“classGreen”）而不是addClass / removeClass < / p>

根据用户的输入改变手风琴面板的颜色

2 个答案: