0

最後の試合の終わりに @ クリックで新しい div を追加したい。

    <form id="form">
        <div class="border item-block">
            <p><b>Color :</b> silver </p>
            <input type="hidden" name="available_colors[silver][color_name]" value="silver">
            <input type="text"  name="available_colors[silver][color_image]" value="SM-9436RE_B_BEAUTY.JPG">
        </div>
        <a style = "float : left; margin-top: 50px" class="button add">Add</a>
    </form>

クリックすると、このattr available_colors [NEW] [0] [color_name]などの入力でdivを作成したいと思います。

このような

    <form id="form">
                <div class="border item-block">
                    <p><b>Color :</b> silver </p>
                    <input type="hidden" name="available_colors[silver][color_name]" value="silver">
                    <input type="text"  name="available_colors[silver][color_image]" value="SM-9436RE_B_BEAUTY.JPG">
                </div>
                <div class="border item-block">
                    <p><b>Color :</b> <input type="text" name="available_colors[NEW][0][color_name]" value=""></p>
                    <input type="text"  name="available_colors[NEW][0][color_image]" value="">
                </div>
                <a style = "float : left; margin-top: 50px" class="button add">Add</a
     </form>

2回目のクリックで、このdivを追加したい

<div class="border item-block">
        <p><b>Color :</b> <input type="text" name="available_colors[NEW][1][color_name]" value=""></p>
        <input type="text"  name="available_colors[NEW][1][color_image]" value="">
 </div>

私はこのアプローチを試みますが、提出されません。最後の div を複製しようとしましたが、すべての入力名属性を切り替える方法がわかりません。 

$('a.add').click(function(){
        var form, fields;
        //$('.item-block').last().clone().insertAfter($('.item-block').last());
        form = $("#form");
        fields = form.find("input[name^='available_colors[NEW]']");
        alert(fields[0]);
    });

誰かが私にこれを知っているとアドバイスできますか？

前もって感謝します。

4

2 に答える 2

1

まず、例の A 要素が壊れています。

グローバル varを使用できます。

var count = 0;

...そして構造化関数:

function addNewBlock(){
    count++;
    return '<div class="border item-block">'+
        '<p><b>Color :</b> <input type="text" name="available_colors[NEW]['+(count-1)+'][color_name]" value=""></p>'+
        '<input type="text"  name="available_colors[NEW]['+(count-1)+'][color_image]" value="">'+
        '</div>';
}

...そして追加機能：

$('a.add').click(function(){
    // here, you get the new structured HTML object
    $html = addNewBlock();

    //and you just need to append it:
    $("#form").append($html);
});

A elementが の中にある場合は機能しませんFORM tag。以下のすべての FORM コードをカットアンドペースト する必要があります。<a style = "float : left; margin-top: 50px" class="button add">Add</a>

jQuery Append のドキュメント: http://api.jquery.com/append/ うまくいくと思います。

于 2013-11-13T17:08:52.983 に答える