JQM：動態添加/刪除圖標到導航欄

Question

我正在嘗試使用頁腳導航欄作爲空閒狀態和繁忙狀態之間的切換。如果用戶點擊免費，則「檢查」圖標應出現在免費導航欄按鈕上。當點擊繁忙時，應從免費按鈕中刪除「支票」並將其添加到忙碌按鈕。我怎樣才能做到這一點？我可以從一個圖標變爲另一個圖標，但不能從一個圖標變爲另一個圖標，反之亦然。

感謝您的幫助！

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