1

私は jQuery にあまり詳しくありません。「クローン」機能を使用したのはこれが初めてです。

基本的に私が達成したいのは、それぞれに入力フィールドを持つ複数の「セクション」を持つフォームを作成することです。ユーザーが各セクションに必要な数の入力フィールドを追加できるようにしたいと考えています。これらの各セクションは、プロセスの早い段階でユーザーがインポートした値に基づいて (単純な php ループを使用して) 動的に作成されます。

フォームが作成されるようにしていますが、ユーザーが各セクションの入力フィールドを追加/削除できるという問題があります。PHPループが入力フィールドと各セクションの「追加」/「削除」ボタンを作成するように設定しました。これらのアイテムの ID は、セクション # に基づいて動的に作成されます。ボタンをクリックすると、既存の入力フィールドを複製する JavaScript 関数が呼び出され、新しいフィールド ID が一意になるように更新されます。この JSfiddle で現在持っているものの例を見ることができます: http://jsfiddle.net/NWGUp/2/ (jsfiddle は php を許可しないため、id を持つ 3 つのセクションの html を含めただけであることに注意してください)そして、phpループが作成するものとまったく同じものすべて）。追加ボタンが機能しないことがわかります。

セクション 2 と 3 だけを削除し、セクション 1 の html とすべての JavaScript をそのままにしておくと、まったく同じようにすべてが適切に機能します。

したがって、明らかに問題はすべて複数の「セクション」があるためですが、番号識別子によって各セクションを一意に処理するようにすべてが設定されているため、その理由はわかりません。

どこが間違っているのか分かりますか？少しわかりにくいかもしれませんので、説明が必要な場合はお知らせください。

ご協力いただきありがとうございます！

ここに私が使用しているjavascriptがあります:

$(document).ready(function () {

        $(".addClass").click(function () {
            //get ch#
            var ch = $(this).attr('param1');

            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            var newNum = new Number(num + 1); // the numeric ID of the new input field being added

            //create var which stores the div name
            var divName = 'input' + ch + '_' + num;
            //alert(divName);
            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('#' + divName).clone().attr('id', 'input' + ch + '_' + newNum);


            // manipulate the name/id values of the input inside the new element
            newElem.children(':first').attr('id', 'name' + ch + '_' + newNum).attr('name', 'name' + ch + '_' + newNum);

            // insert the new element after the last "duplicatable" input field
            $('#' + divName).after(newElem);

            // enable the "remove" button
            var btnName = 'btnDel' + ch;
            //alert(btnName);
            // $('#'+btnName).attr('disabled','');

        });

        $(".delClass").click(function () {
            //get ch#
            var ch = $(this).attr('param1');

            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + ch + '_' + num).remove(); // remove the last element

            // if only one element remains, disable the "remove" button
            /*if (num-1 == 1)
                  $('#btnDel'+ch).attr('disabled','disabled');*/

        });


    });

および html w/3 つのセクションすべて:

<form id="myForm">

    <h2>SECTION 1</h2>

    <div id="input1_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name1_1" type="text" name="name1_1">
    </div>
    <div>
        <input id="btnAdd1" class="addClass" type="button" param1="1" value="Add Another">
        <input id="btnDel1" class="delClass" type="button" param1="1" value="Remove Last">
    </div>
    <br />
    <br />
            <h2>SECTION 2</h2>
    <div id="input2_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name2_1" type="text" name="name2_1">
    </div>
    <div>
        <input id="btnAdd2" class="addClass" type="button" param1="2" value="Add Another">
        <input id="btnDel2" class="delClass" type="button" param1="2" value="Remove Last">
    </div>
    <br />
    <br />
            <h2>SECTION 3</h2>
    <div id="input3_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name3_1" type="text" name="name3_1">
    </div>
    <div>
        <input id="btnAdd3" class="addClass" type="button" param1="3" value="Add Another">
        <input id="btnDel3" class="delClass" type="button" param1="3" value="Remove Last">
    </div>
</form>

と html w/最初のセクションのみ:

<form id="myForm">
    <div id="input1_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name1_1" type="text" name="name1_1">
    </div>
    <div>
        <input id="btnAdd1" class="addClass" type="button" param1="1" value="Add Another">
        <input id="btnDel1" class="delClass" type="button" param1="1" value="Remove Last">
    </div>
    <br />
    <br />

</form>
4

1 に答える 1

0

一般に、ID と名前を設定しなくても問題は解決できます。その場合、すべてがはるかに簡単になります。

HTML:

<form id="myForm">
    <div class="section">
        <h2>SECTION 1</h2>
        <div class="inputWrapper hidden">file path:
            <input type="text" name="name1[]" />
        </div>
        <div class="controls">
            <input class="addClass" type="button" value="Add Another" />
            <input class="delClass" type="button" value="Remove Last" />
        </div>
    </div>
    <div class="section">
        <h2>SECTION 2</h2>
        <div class="inputWrapper hidden">file path:
            <input id="name2_1" type="text" name="name2[]" />
        </div>
        <div class="controls">
            <input class="addClass" type="button" value="Add Another" />
            <input class="delClass" type="button" value="Remove Last" />
        </div>
    </div>
    <div class="section">
        <h2>SECTION 3</h2>
        <div class="inputWrapper hidden">file path:
            <input type="text" name="name3[]" />
        </div>
        <div class="controls">
            <input class="addClass" type="button" value="Add Another" />
            <input class="delClass" type="button" value="Remove Last" />
        </div>
    </div>
</form>

Javascript :

$(function() {
    $(".addClass").on('click', function () {
        var $sect = $(this).closest(".section");
        $sect.find(".inputWrapper").eq(0).clone().show().insertBefore($sect.find(".controls"));
        $sect.find(".delClass").attr('disabled', false);
    }).trigger('click');
    $(".delClass").on('click', function () {
        var $sect = $(this).closest(".section");
        $sect.find(".inputWrapper:last").remove();
        if($sect.find(".inputWrapper:visible").length <= 1) {
            $(this).attr('disabled', true);
        }
    }).attr('disabled', true);
});

更新されたフィドル

于 2013-03-26T19:31:46.210 に答える