Question

我目前已经采用了一种方式，因此用户可以通过按下“添加”按钮来向表单添加另一个文本字段。 div，这使用基本的JS，所以当用户按下div时，add_another＆＃39; div＆＃39; author_2＆＃39;被切换了。

我想这样做，以便当用户按下“add_another”时。 div第二次显示＆＃39; author_3＆＃39; div，当他们按下add_another＆＃39;再次，它显示＆＃39; author_4＆＃39;。我已经放置了所有的CSS和HTML div来支持这个，我只是试图调整我的代码，所以它显示一个接一个的div，而不是切换一个div。

这是我的JS：

<script>
    $(document).ready(function() {
        $('.add_another').on('click', function(){
            $('.author_2').toggle();
        });
    }); 
</script>

我尝试过更改此代码，但没有运气。

我还没有添加我的HTML，因为它只有4个div，＆＃39; author_1＆＃39; ＆＃39; AUTHOR_2＆＃39; ...... 3 ... 4

谢谢你的帮助

Answer 1

您的问题有两种解决方案。
第一个 - 使用静态代码
这意味着最大作者数为4，如果用户达到4，则为此如果是这样 - 您需要存储已经显示的作者数量。

        var authors_shown = 1;
        $(document).ready(function() {
            $('.add_another').on('click', function(){
                authors_shown++;
                if (!$('.author_'+authors_shown).is(":visible")) {
                   $('.author_'+authors_shown).toggle();
                }
            });
        });

但是还有第二 - 更多动态选项。
如果用户想要输入10或20位作者怎么办？您不希望预渲染所有html代码并隐藏它。您应该clone div并更改其id或者如果（HTML）代码（对于另一位作者）不太长，您可以在JS代码中呈现它。

    var div = document.getElementById('div_id'),
    clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
    clone.id = "some_id";
    document.body.appendChild(clone);

如果它是表单，则将输入字段的名称更改为数组author_firstname[]
此外，您可以在另一个隐藏字段中存储已添加作者的数量（因此您知道在服务器端循环表单字段需要多长时间第二种选择更复杂，更长，但更具动态性。

Answer 2

点击add_another时，你应该创建另一个div：像这样的东西：

<script>
    $(document).ready(function() {
        $('.add_another').on('click', function(){
            $('<div><input type="text" name="name[]" /></div>').appendTo('.your_container');
        });
    }); 
</script>

如您所见，输入的名称有[]，这意味着您应该将输入视为数组。

如果您有任何其他问题，请告诉我

祝你好运。

单击其他div时显示div，再次单击时显示不同的div

2 个答案: