1

クエリ モバイル フリップ スイッチがオンかオフかによって、2 つのクラスのテキストの色を変更しようとしています。フリップ スイッチは、オン状態がチェックされ、オフ状態がチェックされていない単なるチェックボックスであるという印象を受けました。私の 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>

ジャバスクリプト

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

1 に答える 1

2

イベント内にラップする必要があります。具体的には、入力のプロパティが変更さ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。

于 2014-02-16T04:41:24.113 に答える