1

テキストボックスの行があり、関数に入力された番号に基づいてそれらを複製する関数があります。したがって、4人のユーザーがいる場合は、行を4回複製して、4人のユーザーの情報を入力します。ただし、このフォームを送信できるようにする方法も必要です。送信時に各行に一意のクラスまたはIDを指定して、テキストボックスごとに読み通す方法がわかりません。

最初の行のすべてに各クラス（またはID）に「1」を追加し、次に2番目の行のすべてに「2」を追加することを考えていました。しかし、私はこれをどのように行うかについてあまり確信がありません。ここに例があります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);
    }    
}

</ p>

4

2 に答える 2

4

コードにタイプミスがあります：

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

removeclassである必要がありますremoveClass。

http://jsfiddle.net/y543n/

また、フィドルにjQueryをロードしておらず、スコープの問題があります。HTMLのonclick属性を使用しており、そのコンテキストでの関数が定義されていません。代わりにjQueryクリックメソッドを使用できます。

$('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/

于 2012-09-22T17:15:56.957 に答える
1

複数回のクローン作成を回避するために、以下のように関数を変更できます。

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);

デモ

クローンと一意の完全なコード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);
    }
}
于 2012-09-22T17:12:55.413 に答える