當點擊不同的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

回答

相關問題