2013-07-17 68 views
0

使用jQuery我改變無線電輸入的(這是一個撥動開關)的顏色,當它是綠色的,當關閉其黑..更改所有單選按鈕,我的代碼只更改第一個?

小提琴:http://jsfiddle.net/SDhfp/1/(僅第一,色彩變化「有求必應」但是當第一個做另一種只改變..其不是自己更改功能)

下面是HTML:

<fieldset class="buttonset"> 
    <span class="toggle-bg" id="responsive" style="background-color: rgb(70, 182, 146);"> 

    <input type="radio" checked="checked" value="1" class="switch-input" name="responsive" id="responsive_0"> 
    <input type="hidden" value="responsive" class="switch-id-value"> 

    <input type="radio" value="0" class="switch-input" name="responsive" id="responsive_1"> 
    <input type="hidden" value="responsive" class="switch-id-value"> 

    <span class="switch ui-buttonset"></span></span> 
</fieldset> 

namevalueinput id都是動態的,所以另一切換單選按鈕的namevalueinput id將是獨一無二的......

這裏是jQuery的:只瞄準的是第一個單選按鈕這恰好是標記上面responsive這是我有很多按鈕中的第一個單選按鈕...

jQuery('.toggle-bg').on('change', function() { 
var value = jQuery('.toggle-bg input.switch-id-value').val(), 
    moon1 = jQuery('#' + value + '_0').is(':checked'), 
    slider = jQuery('._moon_staticarea_height'), 
    toggle = jQuery('.toggle-bg '); 

toggle.css('background-color', (moon1 ? '#46b692' : '#333')); 
slider[moon1?'slideUp':'slideDown'](); 
}).trigger('change'); 

我不知道如何只改變動態創建的按鈕的ID?我試圖使我的元素選擇輸出...

小提琴:http://jsfiddle.net/SDhfp/1/

+1

跨度沒有變化事件,沒有什麼可以改變的? – adeneo

回答

2

您需要使用this,而不是事件中引用的類。

jQuery('.toggle-bg').on('change', function() { 
    var value = jQuery('input.switch-id-value',this).val(), 
     moon1 = jQuery('#' + value + '_0').is(':checked'), 
     slider = jQuery('._moon_staticarea_height'), 
     toggle = jQuery(this); 

    toggle.css('background-color', (moon1 ? '#46b692' : '#333')); 
    slider[moon1 ? 'slideUp' : 'slideDown'](); 
}).trigger('change'); 

jsFiddle example

+0

好酷..我執行它,在這個小提琴http://jsfiddle.net/SDhfp/4/切換bg遵循第一個.. – Mike

+0

你的小提琴是bea-utiful ..有什麼區別 – Mike

+0

哦,我看到它現在 – Mike