Question

我有多个表单，一旦用户完成表单，他们点击“继续”然后移动到另一个部分。页面顶部的标题显示前一个表单已完成。

如果单击顶部的标题，它会将该特定表单展开以重新打开以让该人编辑它。例如，如果“FORM 1”已经完成并且它们处于“FORM 4”并且在“FORM 1”中意识到他们犯了错误，那么他们可以点击并展开它。

我希望能够，当用户点击任何给定的表单标题时，它基本上隐藏了它们所在的表单，扩展了他们希望再次访问的表单，并添加了一个由ID给出的“步骤”他们仍在使用的形式。

我使用了以下代码：

$(document).ready(function() {
  $('.continue').click(function() {
    var theID = $(this).attr('next-value');
    if (theID == 2) {
      $("#form-1").slideUp().addClass('hidden-form');
      $("#initialFormHeading").show();
      $("#form-2").show();
    }
  });

  $('.form-heading').click(function() {
    var theForm = $(this).attr('id');
    if (theForm == "initialFormHeading") {
      $("#form-1").show();
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <div class="form-heading" id="initialFormHeading" style="display:none">
    <h2>
        FORM 1 HEADING
      </h2>
  </div>
  <div id="form-1">
    <input type="text" name="name" value="" placeholder="NAME" />
    <br />
    <input type="email" name="email" value="" placeholder="EMAIL" />
    <br />
    <a class="btn continue" current-value="1" next-value="2">CONTINUE</a>
  </div>

  <div id="form-2" style="display:none;">
    <div class="form-heading" id="secondForm" style="display:none;">
      <h2>
             FORM 2
         </h2>
    </div>
    <input type="text" name="name" value="" placeholder="PHONE NUMBER" />
    <br />
    <input type="email" name="email" value="" placeholder="PO BOX" />
    <a class="btn continue" current-value="2" next-value="3">CONTINUE</a>
  </div>
</form>

目前两种表格都在展示。我试过了：

在包含表单元素的每个div的continue按钮上，有一个current-value和next-value我的目标是当用户点击表单标题时，它找到最接近的“继续”抓取当前值，然后我可以隐藏表单。

var x = $(this).next().find('.continue').attr('current-value');

然而，这不起作用并显示未定义。我也对如何做到这一点的其他方式持开放态度。

Answer 1

在所有表单div上放一个类。在form-heading点击功能中，隐藏该类的所有表单。然后，在下一行，使用您的逻辑显示单击的表单。

我已将公共类formDiv添加到您的所有表单div中，并将简单的行$(".formDiv").not(this).hide();添加到您的.click函数中，以复制我上面建议的行为。

$(document).ready(function() {
    $('.continue').click(function() {
        var theID = $(this).attr('next-value');
        if (theID == 2) {
            $("#form-1").slideUp().addClass('hidden-form');
            $("#initialFormHeading").show();
            $("#form-2").show();
        }
    });

    $('.form-heading').click(function() {
        $(".formDiv").not(this).hide();
        var theForm = $(this).attr('id');
        if (theForm == "initialFormHeading") {
            $("#form-1").show();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <div class="form-heading" id="initialFormHeading" style="display:none">
    <h2>
        FORM 1 HEADING
      </h2>
  </div>
  <div id="form-1" class="formDiv">
    <input type="text" name="name" value="" placeholder="NAME" />
    <br />
    <input type="email" name="email" value="" placeholder="EMAIL" />
    <br />
    <a class="btn continue" current-value="1" next-value="2">CONTINUE</a>
  </div>

  <div id="form-2" class="formDiv" style="display:none;">
    <div class="form-heading" id="secondForm" style="display:none;">
      <h2>
             FORM 2
         </h2>
    </div>
    <input type="text" name="name" value="" placeholder="PHONE NUMBER" />
    <br />
    <input type="email" name="email" value="" placeholder="PO BOX" />
    <a class="btn continue" current-value="2" next-value="3">CONTINUE</a>
  </div>
</form>

Answer 2

你可以改变这个：

var x = $(this).next().find('.continue').attr('current-value');

对此:(如果要单击包含h2的div）

var x = $(this).parent().find('.continue').attr('current-value');

Answer 3

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <legend>FORM 1</legend>
  <input type="text" name="name" value="" placeholder="Name" />
  <input type="email" name="email" value="" placeholder="Email" />
</fieldset>
<fieldset>
  <legend>FORM 2</legend>
  <input type="text" name="pno" value="" placeholder="Phone Number" />
  <input type="text" name="pbox" value="" placeholder="Post box number" />
</fieldset>
<fieldset>
  <legend>FORM 3</legend>
  <input type="text" name="city" value="" placeholder="City" />
  <input type="text" name="state" value="" placeholder="State" />
</fieldset>
<button data-step="prev" disabled>Previous</button>
<button data-step="next">Next</button>
<script>
  var step = 1;
  var steps;
</script>

＆＃13;

$unwind

＆＃13;

Jquery - 最近的值并替换div

3 个答案: