我該如何動態設置導航欄標籤文本？

Question

我想使用腳本動態設置每個選項卡的名稱。我不知道這樣做的確切方式善意幫助我？

這裏是HTML代碼：

  <div data-theme="a" data-role="footer" data-position="fixed" data-tap-toggle="false"> 
      <div class="myNavBar" data-role="navbar" data-iconpos="top" > 
       <ul> 
        <li > 
         <a href="#" id="home_icon" data-transition="pop" data-theme="a" data-icon="custom" class="ui-btn-active ui-state-persist" > 
          Home 
         </a> 
        </li> 
        <li > 
         <a href="favourites.html" id="fav_icon" data-transition="pop" data-theme="a" data-icon="custom" > 
          Favorites 
         </a> 
        </li> 
        <li> 
         <a href="Recents.html" id="recent_icon" data-transition="pop" data-theme="a" data-icon="custom" > 
          Offers 
         </a> 
        </li> 
        <li> 
         <a href="Settings.html" id="setting_icon" data-transition="pop" data-theme="a" data-icon="custom" > 
          Settings 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 

Answer 1

所有上述回答的方式是正確的，但是，在標籤隱藏的上述解決方案的圖標，只有它顯示更新的案文。正確的方法是$($('.ui-btn-text')[0]).html('testing');。它會將第一個標籤Home的名稱更改爲testing。

Answer 2

試試這個

$('ul li:eq(0) a').text('Your Text') //It will change 1st li text,same way others by 1,2,3 

Fiddle

Answer 3

試試這個。

var i=0, 
navNames = ['home_icon', 'fav_icon', 'recent_icon', 'setting_icon']; 

$('.myNavBar').find('li').each(function(){ 
    $(this).children('a').attr('id', navNames[i]) 
    i++; 
}); 

Fiddle Demo

試試這個辦法把文字太導航欄上。

var i=0, 
navNames = { 
       'Home': 'home_icon', 
       'Favorites':'fav_icon', 
       'Offers': 'recent_icon', 
       'Settings': 'setting_icon' 
      }; 

$.each(navNames, function(index, value){ 
    $('.myNavBar').find('li:eq('+i+')') 
    .children('a').attr('id', value) 
    .end().children('a').text(index); 
    i++; 
}); 

Second Demo