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>

单击时，我想创建带有输入的 div，作为 attr available_colors[NEW][0][color_name] 等等。

像这样

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

在第二次点击想要添加这个 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. 您需要剪切粘贴 <a style = "float : left; margin-top: 50px" class="button add">Add</a>以下所有 FORM 代码。

jQuery Append 文档：http ://api.jquery.com/append/ 我想它会为你工作。

于 2013-11-13T17:08:52.983 回答
1

我建议使用 jquery.after()方法： after() - jQuery API。所以你可以像这样使用它：

$('a.add').click(function(){
    // get a handle on the last instance of the div
    var lastDiv = $('#form').find('div.item-block').last();

    // create the new div you want to add
    var newDiv = lastDiv.clone();
    newDiv.find('input').attr('name','available_colors[NEW][1][color_image]');

    // add the new div after the last instance of the item-block div
    lastDiv.after(newDiv);
}
于 2013-11-13T17:10:59.960 回答