当点击不同的div时显示div，当再次点击时显示不同的div

我目前已经做了一个让用户可以通过按下'add_another'div来添加另一个文本字段的方法，这使用基本的JS所以当用户按下div'add_another'时，div'author_2'被切换。当点击不同的div时显示div，当再次点击时显示不同的div

我想让它在第二次按下'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格，'AUTHOR_1 'AUTHOR_2' ... 3 ... 4

谢谢你们的帮助

来源

2017-09-24 cousbrad

有两种解决方案，以你的问题。
第一个 - 使用静态代码
这意味着最大作者数是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[]
你也可以保存加入作者的数量在另一个隐藏字段（所以你知道多久循环表单字段。上
服务器端的第二个选项是一个稍微复杂一些，时间更长，但更多的方式动态

来源

2017-09-24 07:46:03

也许你有一个错字。以我的[小提琴]（https://jsfiddle.net/m3sd3v7v/1）为例 –

你应该再拍格上单击add_another时：是这样的：

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

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

让我知道如果你有任何问题，

好运。

来源

2017-09-24 07:46:50

当点击不同的div时显示div，当再次点击时显示不同的div

回答

相关问题