使用隱藏（）出現一次的元素太多/展（） - JQuery的

Question

我一直在創造一種形式，有多達同一子窗體的15：

<div class="form-group" id="PlayerForm1"> 
    <p>Player: </p> 
    <div class="col-md-10"> 
     <input type="text" id="Player1" value="" /> 
    </div> 
</div> 
// more of the same forms but different ids etc. 

爲了讓更多的形式出現我使用一個按鈕：

<input type="button" name="AddPlayer" id="AddPlayer" value="Add a Player" /> 

了jQuery的按鈕：

$(function() { 
    $("#AddPlayer").click(function() { 
     for (var i = 0; i < 15; i++) { 
      if ($("#PlayerForm" + i).is(":hidden")) { 
       $("#PlayerForm" + i).show(); 
       return; 
      } 
     } 
    }); 
}); 

單擊按鈕時，會立即顯示其中的兩種表單，而我只希望每次點擊都顯示一種表單。我哪裏錯了？
編輯：
全碼：

$(function() { 
    $("#AddPlayer").click(function() { 
     for (var i = 0; i < 15; i + 1) { 
      if ($("#PlayerForm" + i).is(":hidden")) { 
       $("#PlayerForm" + i).show(); 
       return; 
      } 
     } 
    }); 
    $("#RemovePlayer").click(function() { 
     for (var i = 15; i > 0; i - 1) { 
      if ($("#PlayerForm" + i).is(":visible")) { 
       $("#PlayerForm" + i).hide(); 
       return; 
      } 
     } 
    }); 
}); 

HTML：

<div id="Players"> 
      <div class="form-group" id="PlayerForm1"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player1" value="" /> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm2" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player2" value="" /> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm3" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-4"> 
        <input type="text" id="Player3" value="" /> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm4" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-4"> 
        <input type="text" id="Player4" value="" /> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm5" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-4"> 
        <input type="text" id="Player5" value="" /> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm6" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-4"> 
        <input type="text" id="Player6" value="" /> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm7" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-4"> 
        <input type="text" id="Player7" value="" /> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm8" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player8" value=""/> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm9" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player9" value=""/> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm10" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player10" value=""/> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm11" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player11" value=""/> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm12" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player12" value=""/> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm13" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player13" value=""/> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm14" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player14" value=""/> 
       </div> 
      </div> 
      <div class="form-group" id="PlayerForm15" style="display:none"> 
       <p>Player: </p> 
       <div class="col-md-10"> 
        <input type="text" id="Player15" value=""/> 
       </div> 
      </div> 

Answer 1

如果你只是想顯示一個項目，那麼只能選擇一個項目。您可以通過找到第一個隱藏的表單

$('.form-group').hide() 
 

 
$("#AddPlayer").click(function() { 
 
     $('.form-group:hidden:first').show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group" id="PlayerForm1"> 
 
    <p>Player: </p> 
 
    <div class="col-md-10"> 
 
     <input type="text" id="Player1" value="" /> 
 
    </div> 
 
</div> 
 
<div class="form-group" id="PlayerForm2"> 
 
    <p>Player: </p> 
 
    <div class="col-md-10"> 
 
     <input type="text" id="Player2" value="" /> 
 
    </div> 
 
</div> 
 
<div class="form-group" id="PlayerForm3"> 
 
    <p>Player: </p> 
 
    <div class="col-md-10"> 
 
     <input type="text" id="Player2" value="" /> 
 
    </div> 
 
</div> 
 
<div class="form-group" id="PlayerForm4"> 
 
    <p>Player: </p> 
 
    <div class="col-md-10"> 
 
     <input type="text" id="Player4" value="" /> 
 
    </div> 
 
</div> 
 

 
<input type="button" name="AddPlayer" id="AddPlayer" value="Add a Player" />

在這裏可以看到香港專業教育學院使用您的.form-group類，因爲沒有必要通過編號指定做到這一點。