jquery - 以编程方式更改翻转开关背景颜色

Question

我正在使用 jQuery mobile 和 Phonegap 开发一个移动应用程序。所以我的情况是我需要以编程方式更改翻转切换按钮的背景颜色。例如：如果按钮在背景上，则背景颜色为绿色，否则变为红色。我该如何设置？

Answer 1

这是您需要的CSS

<style>
.ui-btn-active {
  background-image: -webkit-gradient(linear,left top,left bottom,from( #44C723 ),to( #317220 ));
  background-image: -webkit-linear-gradient( #44C723,#317220 );
  background-image: -moz-linear-gradient( #44C723,#317220 );
  background-image: -ms-linear-gradient( #44C723,#317220 );
  background-image: -o-linear-gradient( #44C723,#317220 );
  background-image: linear-gradient( #44C723,#317220 )
}
.ui-btn-down-e{
  background-image: -webkit-gradient(linear,left top,left bottom,from( #d2232b ),to( #d2232b ));
  background-image: -webkit-linear-gradient( #d2232b,#d2232b );
  background-image: -moz-linear-gradient( #d2232b,#d2232b );
  background-image: -ms-linear-gradient( #d2232b,#d2232b );
  background-image: -o-linear-gradient( #d2232b,#d2232b );
  background-image: linear-gradient( #d2232b,#d2232b )

}
.online { color: yellow !important } // for changing text color
.offline { color: #fff !important } // for changing text color
</style>

添加一些javascript

<script>
$('[role=application] span:first-child').addClass('online');
$('[role=application] span:nth-child(2)').addClass('offline');
</script>

这是你的html

<div id="switch">
  <select name="toggleswitch1" id="toggleswitch1" data-track-theme="e" data-role="slider">
      <option value="off"> Offline </option>
      <option value="on"> Online </option>
  </select>
</div>

这里的 .ui-btn-active,.ui-btn-down-e 类在 css 中用于更改不同浏览器中的背景颜色，如果需要，您可以在此处更改颜色。javascript用于更改在线和离线的文本颜色。这是小提琴示例http://jsfiddle.net/arunkumarthekkoot/95gPP/

我希望这对你有用。

Answer 2

添加这种简单的样式对我有用：

CSS 部分

.ui-slider-track .ui-btn-active {
    background-color: green !important;
}

为了代码的完整性，这里是剩下的部分......
HTML部分

<label for="flipSwitch">On/Off</label>
<select name="flipSwitch" id="idFlipSwitch" data-role="slider">
    <option value="on">On</option>
    <option value="off">Off</option>
</select>

最后是jQuery 部分

$("#idFlipSwitch").val("on").slider("refresh");

Answer 3

 **CSS**
  <style>
            .green {
                background: green;
            }
            .red {
                background: red;
            }
  </style> 

  **html**
  <a href="" class="green" id="btn" data-role="none">Button</a>

   **Javascript**
  <script>
      $("#btn").on("click",function(){

        if($(this).hasClass("green")){
            $(this).removeClass("green");
            $(this).addClass("red");
            return;
        }if($(this).hasClass("red")){
            $(this).removeClass("red");
            $(this).addClass("green");
            return;
        }
      });

    </script>