0

如何静态添加元素，但在设计时不可见，然后在某些事件发生时动态显示。在这种情况下，我使用像这样的代码 HTML

<input type="text" name="field_1"/>
<input type="text" name="field_2"/>
<input type="text" name="field_3"/>
<input type="text" name="field_4" style="display:none"/>
<input type="text" name="field_5" style="display:none"/>
<a href="#">add another field</a>

第一次，field_4 和 field_5 是不可见的，对吗？但是当我单击“添加另一个字段”时，应该可以看到 field_4 和 field_5。

有什么提示吗？

我不介意是否有人可以用 PHP 解决这个案例，也许这个案例就像 FB，当你输入你的联系信息（你的电话号码）时，如果你只有 1 个号码，这意味着你不需要点击“添加另一个电话”，但是如果您有 2 个或更多数字，您可以单击它，并且字段文本将显示与您单击的一样多。

4

2 回答 2

1

首先，您不需要拥有那些隐藏字段。那不是“动态添加它们”。

<input type="text" name="field_1"/>
<input type="text" name="field_2"/>
<input type="text" name="field_3"/>
<a href="#">add another field</a>

接下来，告诉链接在单击时执行 JavaScript 函数：

<a href="javascript:void()" onclick="addField(e)">add another field</a>

编写你的 JavaScript：

;(function) {
    var counter = 3; //This is set to the number of initial fields.

    function addField(e) {
        e = e || window.event; //Normalize the event.

        counter++; //Increment the counter.

        //Create the new element.
        var element = document.createElement("input");
        element.setAttribute("type", "text");
        element.setAttribute("name", "field_" + counter);

        //Insert it before your link.
        e.target.parentNode.insertBefore(element, e.target);
    }
 })();
于 2013-02-19T13:16:05.960 回答
1 
document.getElementById('field_4').display = 'inline'

这应该适合您的目的。

您可以在单击按钮时添加一个新元素，而不是显示旧的不可见元素。

var index = 2;
document.getElementById('addBtn').addEventListener('click', function() {
    var inp = document.createElement('input')
    inp.setAttribute('type', 'text')
    inp.setAttribute('name', 'field_' + index)
    document.insertBefore(inp, document.getElementById('addBtn'))
    index ++;
})
于 2013-02-19T13:11:28.197 回答