按下按钮增量数据然后推送到多维数组答案

【问题标题】：Pressing Button Increments data then push to Multidimentional Array按下按钮增量数据然后推送到多维数组
【发布时间】：2013-01-01 20:14:23
【问题描述】：

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

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

这是我想要的输出的屏幕截图。

如果我按下添加按钮，另一个字段集将显示在其上方

结果是

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

代码：

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.

];

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

【问题讨论】：

你的意思是，像这样的东西？ jsfiddle.net/Dw8e7
是的！那个！非常感谢！，你应该把它放在答案上，这样我才能接受。不过，谢谢，欠你一个。

标签： javascript jquery html arrays multidimensional-array

【解决方案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/

【讨论】：