按下按钮增加数据然后推送到多维数组

Question

我有这个问题关于当我按下按钮时它添加了另一个元素加上元素的名称也在数组中增量很好，有点难以解释，但我会提供一些截图。

我通过这个网站搜索了一堆解决方案和诸如此类的东西，遗憾的是我似乎无法将它应用于我的问题。

以下是我的愿望输出的截图。

如果按下“添加”按钮，则会在其上方显示另一个字段集

结果将是

因此，如果我再次按下“添加”按钮，它将显示另一个永不结束的字段集循环，并带有相应的递增输入类型名称。

代码：

Fielset的布局

<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;" id="fieldset_fblikeus">
    <div class="condition">
        <div class="clear"></div>
        <div>Label</div>
        <div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div>
        <div class="clear" style="padding-top:5px;"></div>
        <div>URL to Like</div>
        <div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div>
        <div class="clear" style="padding-top:5px;"></div>
    </div>
</fieldset>

启动功能的代码

<a onclick="fb_likeus_add();">Add</a>

function fb_likeus_add() {
    var fieldset_data = '<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;"><div class="condition"><div class="clear"></div><div>Label</div><div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div><div class="clear" style="padding-top:5px;"></div><div>URL to Like</div><div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div><div class="clear" style="padding-top:5px;"></div></div></fieldset>';

    $("#fb_likeus_td").prepend(fieldset_data);
}

主要问题是当我按添加按钮如何增加输入元素的名称，同时将数据添加到div 时，我不知道在哪里/什么开始。但我已经想到了应该是什么样的东西。

Array = [

div1 ['name_1', 'url_1'],

div2 ['name_2', 'url_2'],

div3 ['name_3', 'url_3'],

div4 ['name_4', 'url_4'],

div5 ['name_5', 'url_5']

and so on, it increments when you click the add button.

];

这有点难以解释，仍然希望你们理解我的问题。 如果你们帮助我会很高兴，这意味着很多。提前谢谢。

Answer 1

对此的一个解决方案是在页面的某处包含一个隐藏的“模板”div，其中包含您要插入的标记。在这种特定情况下，标记相对简单，因此您可以将模板标记存储为JavaScript字符串，但与使用页面上的隐藏div相比，这通常不易维护。

在任何情况下，一旦获得模板标记，您只需添加少量JavaScript代码即可跟踪您向网页添加新fieldset的次数。这样，您可以更新fb_likeus_add()函数以在模板标记上执行简单的字符串替换，在将其添加到div之前插入正确的序列号。

这可能听起来有点涉及，但它真的需要很少的代码：

//initialize this when the page loads
var numAdded = 0;

function fb_likeus_add() {
    //increment the counter
    numAdded++;  

    //grab the template html
    var templateHtml = $("#template").html();  

    //write the new count into the template html
    templateHtml = templateHtml.replace(/label_/g, "label_" + numAdded)
                               .replace(/url_/g, "url_" + numAdded);  

    //prepend the updated HTML to the document  
    $("#container").prepend(templateHtml);  
};

以下是一个示例：http://jsfiddle.net/Dw8e7/1/