最初在jquery克隆中隱藏div

Question

我正在循環按鈕單擊一個div。但我需要的是最初隱藏.loop div並將其顯示在按鈕單擊上。

目前它是克隆正在發生完美，唯一需要的是，不要最初顯示div.loop。僅顯示按鈕。

這裏是我當前的代碼和DEMO

clicks = 0; 
$('button').on('click', function() { 
    if ($('div.loop').length < 5) { 
     clicks++; 
     newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container"); 
     $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 
    } 
}); 

Answer 1

clicks = 0; 
$('button').on('click', function() { 
    $('div.loop').show(); 
    if ($('div.loop').length < 5) { 
     clicks++; 
     if(clicks>1){ 
      alert("more 1"); 
      newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 
     } 
     else{ 
      alert("asd"); 
     newLoopDiv = $($('div.loop')[0]).appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 


    } 

    } 
}); 

更換和嘗試這個代碼yours..Hope這是你需要什麼..

JSBIN DEMO

Answer 2

這裏有幾個選項。您最初可能會用CSS隱藏您的模板，然後在克隆上移除隱藏克隆的CSS。另一個選擇是完全使用JavaScript創建您的「循環」元素，並在稍後添加。

Demo Option 1 - 在第一個div.loop模板上使用hide類，使用.removeClass()刪除克隆上的類。

Demo Option 2 - 使用在jQuery中創建的模板而不是選擇一個shell元素。

注意：我已將first name的名稱屬性更新爲first_name。