0

我想优化我在这里找到的代码：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"or 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);
4

3 回答 3

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

希望这可以帮助

于 2013-09-26T22:09:36.937 回答
1

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

mobile_phone.find('label').text('Mobile Phone')
于 2013-09-26T22:11:54.610 回答
1

您可以创建一个根据需要生成文本的函数：

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-26T22:18:13.050 回答