为啥 JQUERY 克隆函数并在其上附加一个 id 并确认电子邮件值?
Posted
技术标签:
【中文标题】为啥 JQUERY 克隆函数并在其上附加一个 id 并确认电子邮件值?【英文标题】:Why JQUERY clone functions and appending an id to it and confirm email value?为什么 JQUERY 克隆函数并在其上附加一个 id 并确认电子邮件值? 【发布时间】:2013-01-18 20:28:24 【问题描述】:我目前正在处理 2 个棘手的 UX JQuery 问题。 我正在使用 JQuery 克隆 2 个表单变量。我如何索引,标识它们,以便我可以用这个 id 标记它们。 例如,如果我从选择框中选择 3,我应该得到 3 行表格,并且在每行的左侧应该以一个数字开头,从 1.form、2.form、3 form 开始。
我遇到的第二个问题是,我想针对confirmattendant[] 验证attendant[]。我将如何在克隆的 html 代码中执行此操作。
这是我的 JSFiddle http://jsfiddle.net/tGprH/5/
这是我的 HTML 代码:
<select name="select" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br/>
<p>Email address, Confirm Email Address</p>
#1 <input type="text" name="attendant[]"/>
<input type="text" name="confirmattendant[]"/>
<br/>
<div id="container">
</div>
这是我的 JQuery
$("select").change(function()
var select = parseInt($('#select').val() , 10);
var $clone = '<input type="text" name="attendant[]" /><input type="text" name="confirmattendant[]" /><br/>';
console.log($clone);
var html = '';
for(var i = 1;i< select ; i++)
html += $clone;
$('#container').empty().html(html);
).change();
【问题讨论】:
【参考方案1】:您可以在 for 循环中打印所需的内容,例如..
html += '#'+(i + 1)+ ' '+$clone;
试试这个
$("select").change(function()
var select = parseInt($('#select').val() , 10);
var $clone = '<input type="text" name="attendant[]" /><input type="text" name="confirmattendant[]" /><br/>';
console.log($clone);
var html = '';
for(var i = 1;i< select ; i++)
html += '#'+(i + 1)+ ' '+$clone;
$('#container').empty().html(html);
)
fiddle here
【讨论】:
【参考方案2】:关于第一个问题:http://jsfiddle.net/tGprH/7/
$("select").change(function()
var select = parseInt($('#select').val() , 10);
var $clone = '<input type="text" name="attendant[]" /><input type="text" name="confirmattendant[]" /><br/>';
console.log($clone);
var html = '';
for(var i = 1;i< select ; i++)
if(i >= 1)
html += '#' + (i+1) + ' ' + $clone;
else
html += $clone;
$('#container').empty().html(html);
).change();
关于比较:http://jsfiddle.net/tGprH/8/
<button id="compare">compare</button>
$('#compare').click(function()
var $attendantArray = $('input[name="attendant[]"]');
var $confirmattendantArray = $('input[name="confirmattendant[]"]');
for(var i = 0;i< $attendantArray.length ; i++)
alert((i+1) + ' attendant [' + $($attendantArray[i]).val() + ' / ' + $($confirmattendantArray[i]).val() + ']')
);
【讨论】:
以上是关于为啥 JQUERY 克隆函数并在其上附加一个 id 并确认电子邮件值?的主要内容,如果未能解决你的问题,请参考以下文章
在 angularjs 指令中,我想在 HTML 中找到一个 id 并在其上添加类
如何在scala中获取分层数组的最终元素并在其上应用聚合函数?
是否始终将 UUID 用于 JPA 实体的 id 属性并在其上使用等于和哈希码?