时间戳

首页 > 解决方案 > div颜色更改jquery单击按钮

javascript - div颜色更改jquery单击按钮

问题描述

有一个完整的按钮。我有一些放置在 table 中的 Toggle 按钮。此切换按钮可以没有值、是/否或 NA 值。单击完整按钮时，我喜欢更改切换按钮的颜色或至少更改 div。我有以下代码。当我签入开发人员控制台并运行命令时，它正在改变 div 颜色，但在运行它时没有（不是从控制台更新）。

$(document).ready(function() {

  $(document).on('click', '#btnComplete', function() {

    if ($('#btnToggleIntro1').val().trim().length < 1) {
      $('#divIntro').attr('style', 'background-color: blue');
      //css('background-color', 'blue');
      //  $('#btnToggleIntro1').css('background-color', '#A497E5');
    } else {
      $('#btnToggleIntro1').css('background-color', '#ffffff');
    }


  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divIntro">
  <telerik:RadToggleButton ID="btnToggleIntro1" runat="server" AutoPostBack="False" Font-Size="14px" meta:resourcekey="btnToggle11Resource1" class="RecomenderButton" ClientIDMode="Static">
    <ToggleStates>
      <telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource1" />
      <telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource2" />
      <telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource3" />
      <telerik:ButtonToggleState Text="N/A" />

    </ToggleStates>
  </telerik:RadToggleButton>
</div>
以下是我希望更改颜色的表格的渲染示例

  <div id="divIntroduction">
                                <table class="table table-bordered table-hover table-striped" id="tbIntroduction">

                                    <tr>
                                        <td class="light-blue-background text-center" colspan="4">INTRODUCTION </td>
                                    </tr>
                                    <tr class="text-left">
                                        <td class="text-center col-xs-1"></td>
                                        <td class="col-xs-5 ">Is this a Staff or instruction.
                                        </td>
                                        <td class="text-center col-xs-2" style="vertical-align: middle">
                                            <div id="divIntro">
                                                <button type="submit" name="btnToggleIntro1" value="Yes" id="btnToggleIntro1" class="RadToggleButton RadButton RadButton_Bootstrap rbButton rbRounded rbIconButton" class="RecomenderButton" style="font-size:14px;"><span class="rbText">Yes</span><input id="btnToggleIntro1_ClientState" name="btnToggleIntro1_ClientState" type="hidden" /></button>
                                            </div>

                                        </td>
                                        <td class="text-center col-xs-2" style="vertical-align: middle">
                                            <button type="submit" name="btnToggleIntroAprv" value=" " id="btnToggleIntroAprv" class="RadToggleButton RadButton RadButton_Bootstrap rbButton rbRounded rbIconButton" style="font-size:14px;"><span class="rbText"> </span><input id="btnToggleIntroAprv_ClientState" name="btnToggleIntroAprv_ClientState" type="hidden" /></button>
                                        </td>
                                    </tr>
                                </table>
                            </div>

标签： javascriptjqueryasp.netwebformstelerik

解决方案

最简单的解决方案之一是使用 css 并在按钮上单击切换按钮，更改颜色

<style type="text/css">.Checked {
  background-color: white !important;
}

.notChecked {
  background-color: indianred !important;
}

</style>
<div id="divIntro">
  <telerik:RadToggleButton ID="btnToggleIntro1" runat="server" AutoPostBack="False" Font-Size="14px">
    <ToggleStates>
      <telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource1" CssClass="notChecked" />
      <telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource2" CssClass="Checked" />
      <telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource3" CssClass="Checked" />
      <telerik:ButtonToggleState Text="N/A" CssClass="Checked" />

    </ToggleStates>
  </telerik:RadToggleButton>
</div>

推荐阅读