克隆进入循环

Question

我有一排文本框，我有一个函数可以根据函数中的数字来克隆它们。因此，如果将有4个用户，那么我希望该行克隆4次以输入4个用户的信息。但是我也想要一些方法来提交这个表单，我无法弄清楚如何为每个文本框赋予每一行一个唯一的类或ID，以便我在提交时可以阅读它们。

我在考虑添加＆＃34; 1＆＃34;每个类（或id）到第一行中的所有内容，然后＆＃34; 2＆＃34;在第二个一切。但我不太确定如何做到这一点。我有一个例子Here In jsFiddle，因为我试图添加for循环并克隆一定次数，现在克隆甚至不工作 - 如果有人有任何建议，它会真的有帮助我出去了。

<div class="RegisterContainer">
  <div class="RegisterHead"><a>Register Attendees</a></div>
    <div class="placenewrows"></div>
</div>
<br />
<input type="button" onclick="fnCloneTemplate({'number' : '3'});" value="make 3 rows">

<div class="_template">
  <a class="left1">First Name:</a>
  <a class="left2"></a><a class="left2">Last Name:</a>
  <a class="left3">Phone #</a><a class="left4">Email:</a>
  <a class="left5">Optional Comment</a><br />
  <input type="text" class="tFirstName left1"/>
  <input type="text" class="tLastName left2"/>
  <div class="phonenumberbox left3">
    <input type="text" class="first3digits" maxlength="3" />
    <a style="position:relative;top:-1px;">-</a>
    <input type="text" class="next3digits" maxlength="3" />
    <a style="position:relative;top:-1px;">-</a>
    <input type="text" class="last4digits" maxlength="4" />
 </div>                                                                                              <input type="text" class="tEmail left4"/>   

function fnCloneTemplate(x){
    var NumofClones = (x.number * 1);
    for(i=0; i <= NumofClones; i++)
    {
       var newrow = $('._template').clone().removeclass('_template');
        $('.placenewrows').append(newrow);
    }    
}

Answer 1

您的代码中存在拼写错误：

var newrow = $('._template').clone().removeclass('_template');
                                     //----^

removeclass应为removeClass。

http://jsfiddle.net/y543n/

此外，您还没有在您的小提琴中加载jQuery，并且存在一个范围问题，您正在使用HTML onclick属性，并且您未定义该上下文中的函数。您可以使用jQuery click方法代替：

$('input[type=button]').click(function(e){
   e.preventDefault();
   // ....
})

---

$('input[type=button]').click(function(e) {
    var numofClones = 3;
    e.preventDefault();
    var b = $('.placenewrows input[type=text]').length;
    var newrow = $('._template').clone().removeClass('_template').find('input[type=text]').addClass(function(i, cur) {
            return 'something' + ++b
    }).end()
    for (i = 0; i < numofClones; i++) {
        $('.placenewrows').append(newrow);
    }
})​

http://jsfiddle.net/bgCXX/

Answer 2

您可以更改以下功能，以避免多次克隆。

function fnCloneTemplate(e){
    var NumofClones = (e.data.number * 1),
        newrow= $('._template').clone().removeClass('_template'); // in your code
                                                                  // removeClass spelling
                                                                  // mistaken
    for (i=0; i<NumofClones; i++)
    {
        $('.placenewrows').append(newrow);
    }    
}

使用on()：

的 HTML 的

<input type="button"value="make 3 rows" id="make_clone">

的的jQuery 的

function fnCloneTemplate(e){
    var NumofClones = (e.data.number * 1),
        newrow= $('._template').clone().removeClass('_template');
    for (i=0; i<NumofClones; i++)
    {
        $('.placenewrows').append(newrow);
    }    
}

$('#make_clone').on('click',{'number' : '3'}, fnCloneTemplate);

的 THE DEMO 的

克隆和唯一class

的完整代码

function fnCloneTemplate(x) {
    var NumofClones = (x.data.number * 1),
        clone = $('._template').clone().removeClass('_template');
    for (i = 0; i <= NumofClones; i++) {
        var newrow =    clone
                        .find('input[type=text]')
                        .attr('class', function(i, oldClass) {                             
                                return oldClass.replace(/\d/, function(char) {
                                    return +char + i ;
                                });
                                return newClass
                            })
                        .end();
        $('.placenewrows').append(newrow);
    }
}