使用隐藏（）出现一次的元素太多/展（） - 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类，因为没有必要通过编号指定做到这一点。