2014-02-16 78 views
1

我試圖根據查詢手機翻轉開關是打開還是關閉來更改2個類的文本顏色。我的印象是,翻轉開關只是一個複選框,開啓狀態被選中,關閉狀態未被選中。我的JavaScript經驗是非常小的。 任何人都知道我可以如何解決這個問題?使用jQuery手機翻轉開關更改文本顏色

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> 

SWITCH

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

回答

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

一個較短的方式做到這一點:

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

jsFiddle here.

+0

完美,謝謝null – rizzledon

+1

@rizzledon無後顧之憂 - 我只是添加了一個更短的方式來做到這一點,如果你願意。 – lifetimes