javascript - 单击不同的div时显示div，再次单击时显示不同的div

Question

我目前已经找到了一种方法，用户可以通过按下“add_another”div 向表单添加另一个文本字段，这使用基本的 JS，因此当用户按下 div“add_another”时，div“author_2”是切换。

我想做到这一点，当用户第二次按下“add_another”div 时，它会显示“author_3”div，当他们再次按下“add_another”时，它会显示“author_4”。我已经将所有 CSS 和 HTML div 放在适当的位置来支持这一点，我只是想调整我的代码，以便它显示一个接一个的 div，而不是切换单个 div。

这是我的JS:

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

我曾尝试更改此代码，但没有成功。

我没有添加我的 HTML，因为它只有 4 个 div，'author_1' 'author_2' ... 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[]
您还可以将添加的作者数量存储在另一个隐藏字段中(这样您就知道在服务器端循环表单字段需要多长时间。
第二种选择更复杂，更长，但更动态。