为啥 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 并在其上添加类

jQuery向对象添加方法,然后在其上触发事件

如何在scala中获取分层数组的最终元素并在其上应用聚合函数?

是否始终将 UUID 用于 JPA 实体的 id 属性并在其上使用等于和哈希码?

如何在 MapView 上绘制多边形,填充它,并在其上放置一个 onTouch 事件

交换2个html元素并在其上保留事件侦听器