6

私が望むものを達成するための良い方法を見つけるのに数日かかったので、他の人が貴重な時間を節約し、不健康な欲求不満を解消するために、この Q&A を投稿しようと思いました :3. できる限りコードを単純化しました (フォーム アクションの削除など)。

基本的に、私がやりたかったのはこれを作ることです:

<form>
    <p>
        <input type="button" value="Add phone number"> 
    </p>
</form>

これになります（ボタンをクリックして）：

<form>
    <div>
        <p>
            Phone number : <input type="text" name="phone_number1"> 
            <input type="button" id="remove_phone_number1" value="Remove">
        </p>
    </div>
    <p>
        <input type="button" value="Add phone number">
    </p>
</form>

もう一度クリックすると、次のようになります。

<form>
    <div>
        <p>
            Phone number : <input type="text" name="phone_number1"> 
            <input type="button" id="remove_phone_number1" value="Remove">
        </p>
    </div>
    <div>
        <p>
            Phone number : <input type="text" name="phone_number2"> 
            <input type="button" id="remove_phone_number2" value="Remove">
        </p>
    </div>
    <p>
        <input type="button" value="Add phone number">
    </p>
</form>

(もちろん、動作する [削除] ボタンを使用するすべて)

そのようなことを行うのは非常に簡単で簡単だと思いましたが、解決策を見つけるのに非常に苦労しました.

4

2 に答える 2

18

これが私がやったことです！=D

同じ動的に追加されたフォームフィールドを使用しているページがたくさんあるので、それを必要とするすべてのページにフォームの非表示モデルを (php) 含め、必要に応じて (または多くの) 表示バージョンのクローンを作成できるようにしたいと考えていました。 . この投稿の目的ではないので、php のインクルードを気にするつもりはありません。これは私のコードを再利用する方法の 1 つであることを覚えておいてください。飛び込みましょう！

HTML

<div id="phone_number_form" class="hidden">
    <p>
        Phone number : <input type="text" name="phone_number"> 
        <input type="button" id="remove_phone_number" value="Remove">
    </p>
</div>
<form>
    <p>
        <input type="button" value="Add phone number" id="add_phone_number">
    </p>
</form>

CSS

.hidden {
    display: none;
}

jQuery

<script>
    $(document).ready(function(){
        //We will be using an unique index number for each new instance of the cloned form
        var phone_number_form_index=0;
        //When the button is clicked (or Enter is pressed while it's selected)
        $("#add_phone_number").click(function(){
            //Increment the unique index cause we are creating a new instance of the form
            phone_number_form_index++;
            //Clone the form and place it just before the button's <p>. Also give its id a unique index
            $(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
            //Make the clone visible by changing CSS
            $("#phone_number_form" + phone_number_form_index).css("display","inline");
            //For each input fields contained in the cloned form...
            $("#phone_number_form" + phone_number_form_index + " :input").each(function(){
                //Modify the name attribute by adding the index number at the end of it
                $(this).attr("name",$(this).attr("name") + phone_number_form_index);
                //Modify the id attribute by adding the index number at the end of it
                $(this).attr("id",$(this).attr("id") + phone_number_form_index);
            });
            //When the Remove button is clicked (or Enter is pressed while it's selected)
            $("#remove_phone_number" + phone_number_form_index).click(function(){
                //Remove the whole cloned div
                $(this).closest("div").remove();
            });
        }); 
    });
</script>

これが実際の例です: http://jsfiddle.net/wc28f/3/

私の投稿があなたの何人かを助けることを願っています！^_^

間違いや最適化の可能性を見つけた場合は、コメントしてください。できるだけ早く修正します

猛血

于 2013-10-24T22:47:07.263 に答える
4

同様の問題に対する合理的で柔軟な解決策が見つからなかったため、次のように思いつきました。

「元の」要素を作成し、ページ上で非表示にしました。元の子要素内でインクリメントする必要がある属性の値に「---」を追加しました。

ユーザーがボタンをクリックしてオリジナルのクローンを作成するたびに、クローンを作成し、「---」をそのクローンの HTML 内の現在のインデックスにグローバルに置き換えました。このようなもの：

var $clone = $original.clone();
var cloneHTML = $clone.html().replace(/---/g, incrementedFieldNum);
$clone.html(cloneHTML);

// Insert and show the clone after the original
$original.after($clone);

データ属性を使用して、incrementedFieldNum の更新された値を格納しました (上記のコードには示されていません)。

うまくいけば、それは役に立ちます。これはコードがはるかに少なく、より一般的なソリューションだと思います。ID と名前をインクリメントする必要があるネストされた要素がたくさんあったため、@Fierceblood のようなソリューションは実用的ではありませんでした。

于 2014-04-10T07:23:55.943 に答える