Javascript 使用Hide（）/Show（）-JQuery一次显示的元素过多_Javascript_Jquery_Html

Javascript 使用Hide（）/Show（）-JQuery一次显示的元素过多

javascript jquery html

Javascript 使用Hide（）/Show（）-JQuery一次显示的元素过多,javascript,jquery,html,Javascript,Jquery,Html,我一直在创建一个表单，其中最多有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 f

我一直在创建一个表单，其中最多有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.


玩家：
//更多相同的形式，但不同的ID等。

要显示更多表单，我使用一个按钮：

<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;
          }
      }
  });
});

$（函数（）{
$（“#添加播放器”）。单击（函数（）{
对于（变量i=0；i<15；i++）{
如果（$（“#播放性能”+i）.是（“：隐藏”））{
$（“#播放性能”+i）.show（）；
返回；
}
}
});
});

单击按钮时，这些表单中的两个会同时显示，而我只希望每次单击都显示一个表单。我哪里出错了？
编辑：
完整代码：

$(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;
            }
        }
    });
});

$（函数（）{
$（“#添加播放器”）。单击（函数（）{
对于（变量i=0；i<15；i+1）{
如果（$（“#播放性能”+i）.是（“：隐藏”））{
$（“#播放性能”+i）.show（）；
返回；
}
}
});
$（“#RemovePlayer”）。单击（函数（）{
对于（变量i=15；i>0；i-1）{
如果（$（“#播放性能”+i.）是（“：可见”））{
$（“#播放性能”+i）.hide（）；
返回；
}
}
});
});

HTML:


玩家：
玩家：
玩家：
玩家：
玩家：
玩家：
玩家：
玩家：
玩家：
玩家：
玩家：
玩家：
玩家：
玩家：
玩家：

如果您只想显示一个项目，请只选择一个项目。您可以通过查找第一个隐藏的表单来完成此操作

$（'.form group'）.hide（）
$（“#添加播放器”）。单击（函数（）{
$（'.form组：hidden:first'）.show（）；
});

玩家：
玩家：
玩家：
玩家：
如果您只想显示一个项目，请只选择一个项目。您可以通过查找第一个隐藏的表单来完成此操作

$（'.form group'）.hide（）
$（“#添加播放器”）。单击（函数（）{
$（'.form组：hidden:first'）.show（）；
});

玩家：
玩家：
玩家：
玩家：
你在哪里调用.hide（）
？@Pointy这是一个简化的例子，在扩展的jqueryy中调用hide代替show（）。你的代码将通过playermerf0
通过playermerf14
显示任何隐藏的形式，这听起来与你试图做的不一样。另外，给我们看看真正的代码！如果要在找到第一个元素并使其可见后结束for
循环，请使用break
，而不是return
…在哪里调用.hide（）
？@Pointy这是一个简化的示例，在show（）的位置调用hide在扩展的jqueryy中，您的代码将显示id为playermerf0
到playermerf14
的任何隐藏形式-这听起来不像您试图执行的操作。另外-显示真正的代码！如果您想在找到第一个元素并使其可见后结束for
循环-这是使用break
完成的，而不是return…将要在注释中添加类似的内容：）同意，在这里按类选择元素比经历计算“编号”的麻烦更有意义我正要在注释中添加类似的内容：）同意，在这里，按类选择元素比计算“编号”ID的麻烦更有意义。
<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>