JQM：navbarにアイコンを動的に追加/削除する

Question

空き状況と通話中状態の切り替えにフッタナビゲータを使用しようとしています。ユーザーがFreeをタップすると、「チェック」アイコンがFree navbarボタンに表示されます。 Busyをタップすると、Freeボタンから "check"を削除し、Busyボタンに追加する必要があります。どうすればこれを達成できますか？私はあるアイコンから別のアイコンに変更できますが、変更することはできません。

ありがとうございました！

Answer 1

最も簡単な方法は、両方のナビゲーションバーボタンにチェックアイコンを追加し、必要に応じて非表示にすることです。

私はあなたには、いくつかのコードを追加することができ、質問として、ここでhttp://jsfiddle.net/kiliman/d7MvN/

$(document).bind('pageinit', function(e, data) { 
    // set initial status 
    updateStatus('free'); 

    $('#nvb1 a').bind('click', function(e) { 
     var $btn = $(this); 
     updateStatus($btn.data('status')); 

     // tell JQM that you handled the event 
     e.stopPropagation(); 
     e.preventDefault(); 
    }); 
}); 

function updateStatus(newStatus) { 
    var $nav = $('#nvb1'); 
    $nav.find('a[data-status=free] .ui-icon').toggle(newStatus === 'free'); 
    $nav.find('a[data-status=busy] .ui-icon').toggle(newStatus === 'busy');   
}