Javascript 使用jQuery mobile翻转开关更改文本颜色

我试图根据查询移动翻转开关是打开还是关闭来更改两个类的文本颜色。我的印象是翻转开关只是一个复选框，打开状态被选中，关闭状态被取消选中。我的javascript经验非常少。 有人知道我怎么解决这个问题吗

班级

<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>

如果（$（“#flip-checkbox-4”）是（“：checked”））{
$（“.text left”）.css（“颜色”、“灰色”）；
$（“.text right”）.css（“颜色”、“蓝色”）；
}否则{
$（“.text left”）.css（“颜色”、“蓝色”）；
$（“.text right”）.css（“颜色”、“灰色”）
}

您需要将其包装在事件中；具体来说，是一个

change（）

事件，用于在输入的

选中的
属性发生更改时监听：

$("#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")
  }
});


实现此目的的较短方法：

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

@rizzledon不用担心-如果您愿意，我只是添加了一个较短的方法。