如何修改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变量？

回答

相关问题