jquery切换按钮添加删除类

Question

我试图按照jquery文档的规范，但我不能初始化按钮的标签编程和添加/删除类。

请看看这个jsbin中的几行。

http://jsbin.com/akinod/2/edit

HTML

<label for="xAxisToggleBtn"></label> 
<input type="checkbox" id="xAxisToggleBtn"/> 

CSS

.on { 
    background-color: green; 
    color: white; 
} 

.off { 
    background-color:brown; 
    color: white; 
} 

的Javascript

$(window).load(function() { 

     $("#xAxisToggleBtn").button(); 


     $('#xAxisToggleBtn').die('click').live('click', function(){ 

       if($(this).is(':checked')){ 
        $(this).button('option', 'label', 'Turn Off'); 

        //why I cannot add/remove classes to change the theme? 
        $(this).addClass('on'); 
        $(this).removeClass('off'); 

       } else { 
        $(this).button('option', 'label', 'Turn On'); 

        //why I cannot initialize add/remove classes to change the theme? 
        $(this).addClass('off'); 
        $(this).removeClass('on'); 

       } 
     }); 

}); 


//why I cannot initialize the label here? 
$("#xAxisToggleBtn").button('option', 'label', 'Turn Off'); 
$("#xAxisToggleBtn").attr('checked', true); 
$("#xAxisToggleBtn").addClass('on'); 

Answer 1

您必须将该类添加到按钮小部件中，您的样式将需要覆盖jQuery-UI自己，并确保在尝试操纵它们之前加载元素。

$(function() { 
    $("#xAxisToggleBtn").attr('checked', true) 
     .addClass('on').button({'label': 'Turn Off'}) 
     .button('widget') 
     .addClass('off');   

     $('#xAxisToggleBtn').on('click', function(){     
       if($(this).is(':checked')){ 
        $(this).button('option', 'label', 'Turn Off'); 
       } else { 
        $(this).button('option', 'label', 'Turn On'); 
       } 
       $(this).button('widget').toggleClass('on off'); 
     }); 

}); 

.on { 
    background: green!important; 
    color: white!important;  
} 

.off { 
    background:brown !important; 
    color: white !important;  
} 

DEMO

Answer 2

我在这里再次进行了更改：http://jsfiddle.net/5g2Y6/2/

注：这是一个黑客。按钮插件没有任何选项的CSS。请查看更多关于按钮插件的文档。 PS：不要使用“live”方法，不推荐使用它。使用jquery“on”方法。