如何在jQuery中修改HTML變量？

Question

我想優化在這里找到的代碼： http : //codepen.io/leongaban/pen/fJGie

目前，我有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。

有沒有辦法例如將默認輸入電話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);

Answer 1

如果使用像Underscore 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

希望這可以幫助

Answer 2

在您的示例中，您可以使用：

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

Answer 3

您可以創建一個根據需要生成文本的函數：

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