使用jQuery移動翻轉開關更改文本顏色

Question

我正在嘗試根據查詢移動翻轉開關是打開還是關閉來更改2類的文本顏色。 我給人的印象是，撥動開關只是一個復選框，處於選中狀態，處於打開狀態，處於未選中狀態。 我的JavaScript經驗很少。 有人知道我該如何解決嗎？

CLASSES

<div class="text-left">Make me blue when switch is off and grey when on </div>
<div class="text-right">Make me blue when switched is on and grey when off</div>

開關

<form>
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-4" id="flip-checkbox-4" data-wrapper-class="custom-size-flipswitch">
</form>

JAVASCRIPT

<script type="text/javascript">
if($("#flip-checkbox-4").is(":checked")) {
    $(".text-left").css("color", "grey");
    $(".text-right").css("color", "blue");
} else {
    $(".text-left").css("color", "blue");
    $(".text-right").css("color", "grey")
}
</script>

Answer 1

您需要將其包裝在事件內； 具體來說，是一個change()事件，用於偵聽何時更改了輸入的checked屬性：

$("#flip-checkbox-4").change(function(){
  if($("#flip-checkbox-4").is(":checked")) {
     $(".text-left").css("color", "grey");
     $(".text-right").css("color", "blue");
  } else {
     $(".text-left").css("color", "blue");
     $(".text-right").css("color", "grey")
  }
});

jsFiddle在這里。

一種更簡單的方法：

$("#flip-checkbox-4").change(function(){
   $(".text-left").css("color", this.checked ? "grey" : "blue");
   $(".text-right").css("color", this.checked ? "blue" : "grey");
});

jsFiddle在這里。