Question

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

的代码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个或更多的数字你可以点击它，字段文本会显示你点击的数量。

Answer 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 ++;
})

Answer 2

首先，您不需要拥有这些隐藏的字段。那不是＆＃34;动态添加它们＆＃34;。

<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);
    }
 })();

如何动态添加另一个字段

2 个答案: