Question

我想在点击@上一场比赛结束时添加新的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]);
    });

有人建议我知道吗？

提前谢谢你。

Answer 1

首先，您示例中的 A元素已损坏。

您可以使用全局变量：

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附加文档：http://api.jquery.com/append/ 我想这对你有用。

Answer 2

我建议使用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);
}

jQuery - 在最后一个匹配的div之后添加新的div

2 个答案: