如何修改jQuery中的HTML變量？

我想優化我的代碼在這裏找到：http://codepen.io/leongaban/pen/fJGie 如何修改jQuery中的HTML變量？

目前我有var inputphone其中包含輸入字段的默認HTML。

var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}' 
class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>");

從下拉菜單中選擇我場有幾種類型，當用戶選擇某一個領域我基本上每重複使用默認的HTML用戶可以從（移動，工作等）選擇在那一刻時間。

enter image description here

有沒有我可以例如只是把默認inputphone HTML到像MOBILE_PHONE另一個變量，然後插入一個字符串到標籤，或到姓名字段的方式？

東西有點像
mobile_phone.label = "Mobile Phone"或mobile_phone.html.find('label')？

當前代碼：

// Default Phone Input 
var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}' 
class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>"); 

// Create new input for Mobile Phone 
var mobile_phone = inputphone; 
mobile_phone.html("<li><label>Mobile Phone</label><br/><input type='tel' pattern='[0-9]{10}' 
class='added_phone' name='mobile phone' value='' autocomplete='off' maxlength='20' /></li>"); 

// Add the Mobile Phone input to the page 
$('.new_option').append(mobile_phone);

來源

2013-09-26 Leon Gaban

是的，但它如果你從字符串周圍刪除了$（），那麼你的工作會更好，這樣你只需要一個字符串。 .append會將它變成dom節點。您可以使用基本字符串操作根據需要對字符串進行更改。 –

您也可以使用'.clone（）'創建HTML元素的副本，然後插入克隆。 – Jasper

，因爲你需要你可以創建生成的文本功能：

function createInput(labelText, nameText) { 
    return $("<li><label>" + labelText+ "</label><br/><input type='tel' pattern='[0-9]{10}' 
class='added_phone' name='" + nameText + "' value='' autocomplete='off' maxlength='20' /></li>"); 
}

來源

2013-09-26 22:18:13

呃另一個/ facepalm時刻！當然，我可以做到這一點，我猜這一天晚了，我得到了tunnelcode！謝謝：） –

如果你使用模板庫像下劃線JS就可以達到這樣的：

var item = _.template("<li><label><%= label%></label><br/><input type='tel' pattern='[0-9]{10}' class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>"); 

var mobile_phone = item({label: 'Mobile Phone'});; 

$('.new_option').append(mobile_phone);

小提琴：http://jsfiddle.net/KyleMuir/aygFB/

更多關於下劃線模板的信息在這裏找到： http://underscorejs.org/#template

希望這有助於

來源

2013-09-26 22:09:36

這可能是整個模板框架的一種簡單情況。如果您在需要替換值的HTML字符串中放置字符串「{some key}」，簡單的'.replace（'{some key}'，'My New Label'）'就可以解決問題。很好的例子。 – Jasper

哦，那真是太酷了謝謝:)不知道那個框架！肯定會在我的項目中使用這個地方...我認爲賈斯珀是正確的，可能會增加我目前需要的太多 –

在您的例子，你可以使用：

mobile_phone.find('label').text('Mobile Phone')

來源

2013-09-26 22:11:54

如何修改jQuery中的HTML變量？

回答

相關問題