2

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

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

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

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

在此处输入图像描述

结果将是

在此处输入图像描述

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

代码：

片集的布局

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

];

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

4

1 回答 1

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/

于 2013-01-18T07:02:52.447 回答