如何使用jQM動態更改DOM元素文本而不會丟失樣式

如何在不丟失jQM樣式的情況下更改dom元素的文本？ - 我可以調用.text（'sometext'）的大多數項目，但是我遇到了某些元素的問題，例如鏈接了按鈕的數據角色和單選按鈕的標籤 - jQM樣式變得混亂。如何使用jQM動態更改DOM元素文本而不會丟失樣式

我已經想出了一個函數，但我不太滿意我需要如何識別這些邊緣情況 - 是否有更好的方法來更改各種元素的文本而不會丟失它們的jQM css？

這並不意味着我不應該這麼複雜 - 也許這是因爲我是web dev的新手，但我經常遇到類似這樣的問題。有誰知道一個很好的參考使用？ - 它是這樣一個痛苦試圖「猜測」，這是很難找到在谷歌的答案，當你「標籤上的單選按鈕JQM動態設置文本」搜索

var domElement = $j('#' + request.id); 

//check if it exists 
if (domElement) { 
    if (domElement.length === 1) { 

     switch(domElement.get(0).tagName.toLowerCase()) { 
      case 'label': 
       //it could be part of a radio button 
       if (domElement.get(0).className.toLowerCase().indexOf("ui-radio") > 0){ 
        domElement.find('.ui-btn-text').text(request.val); 
       } 
       else{ 
        domElement.text(request.val); 
       } 
       break; 
      case 'p': 
      case 'span': 
      case 'textarea': 
      case 'li': 
      case 'h3': 
       domElement.text(request.val); 
       break; 
      case 'input': 
       domElement.val(request.val); 
       break; 
      case 'a': 
       var datarole = domElement.data('role'); 
       switch(datarole) { 
        case 'button': 
         domElement.find('.ui-btn-text').text(request.val); 
         break; 
       } 

       break; 
     } 
    } 

}

來源

2012-07-03 Mr Shoubs

你想申請文本在JQM頁面初始化之前使用pagebeforecreate事件進行更改。

此時DOM尚未修改，因此您可以像平常使用jQuery一樣選擇元素。這是首選的方法，因爲它不依賴於對JQM創建的底層標記（在未來版本中可能會更改）的認識/硬編碼。

在將JQM腳本包含在頁面上之前，請確保放置您的代碼...確保您的代碼將首先執行。

$(function() { 

    $(document).bind("pagebeforecreate", beforePageCreate); 

    function beforePageCreate(event, ui) { 
     $('a').text('Text modified before page creation.'); 
     $('input').val('Value modified before page creation.'); 
     $('label').text('Text modified before page creation.');   
    }; 

});

這裏是pagebeforecreate事件的完整的例子：http://jsfiddle.net/VCYLs/2/

來源

2012-07-03 20:51:42

我喜歡它，但該事件可能是在這種情況下，對於我來說太早。有其他選擇嗎？特別適用於在頁面轉換後創建的動態生成的html。 –

可能是PageHide或PageBeforeHide事件是做這個事情的地方嗎？ - 可以使用data.nextpage？雖然我認爲仍然會遇到jQM已經初始化的相同問題？ –

難道這樣的事情對你的工作？

http://jsfiddle.net/HZBfY/

$('#changeLabels').on('click', function() { 
    $('.radioGroup').each(function() { 
     var radio = $(this); 
     $("label[for='"+radio.attr('id')+"']").find('span.ui-btn-text').text('New Label for '+radio.attr('id')); 
     console.log('New Label for '+radio.attr('id')); 
    }); 
});

HTML

<div data-role="page" class="type-home"> 
    <div data-role="content"> 

     <fieldset data-role="controlgroup"> 
     <legend>Choose a pet:</legend> 
      <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" class="radioGroup"/> 
      <label for="radio-choice-1">Cat</label> 

      <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" class="radioGroup"/> 
      <label for="radio-choice-2">Dog</label> 

      <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" class="radioGroup"/> 
      <label for="radio-choice-3">Hamster</label> 

      <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" class="radioGroup"/> 
      <label for="radio-choice-4">Lizard</label> 
     </fieldset> 
     <br /> 
     <a href="#" data-role="button" id="changeLabels">Change Radio Labels</a> 
    </div> 
</div>

來源

2012-07-03 21:01:06

如何使用jQM動態更改DOM元素文本而不會丟失樣式

回答

相關問題