0

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');
4

2 に答える 2

1

ここでもう一度変更を加えました：http：//jsfiddle.net/5g2Y6/2/

注：これはハックです。ボタンプラグインには、cssのオプションはありません。ボタンプラグインのドキュメントについては、詳細をご覧ください。

PS：非推奨の「ライブ」メソッドを使用しないでください。jqueryの「on」メソッドを使用します。

于 2012-08-29T05:35:30.407 に答える
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;    
}

デモ

于 2012-08-29T05:46:46.387 に答える