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，因为无需按ID定位。

使用Hide（）/ Show（） - JQuery一次出现太多元素

1 个答案: