Javascript 单击其他div时显示div，再次单击时显示其他div

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

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

这是我的JS：

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

$（文档）.ready（函数（）{
$（'.add_other'）。在（'click'，function（）上{
$（'.author_2'）.toggle（）；
});
}); 

我尝试过修改这个代码，但是没有成功

我没有添加我的HTML，因为它只有4个div，“author_1”“author_2”。。。3…4

---

感谢您的帮助

您的问题有两种解决方案
第一个-使用静态代码 这意味着最大作者数为4，如果用户达到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代码并将其隐藏。您应该修改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\u firstname[]

您还可以将添加的作者数存储在另一个隐藏字段中（这样您就知道在服务器端循环表单字段需要多长时间。

---

第二个选项更复杂、更长，但更具动态性。

单击“添加另一个”时，您应该创建另一个div： 大概是这样的：

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

$（文档）.ready（函数（）{
$（'.add_other'）。在（'click'，function（）上{
$（''）.appendTo（'.your_container'）；
});
}); 

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

如果你还有其他问题，请告诉我

---

祝你好运。

也许你有打字错误。请以我的为例