javascript - Jquery - 最接近的值并替换div

Question

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

如果单击顶部的标题，它会将该特定表单重新展开以供用户编辑。例如，如果“表格 1”已完成，并且他们在“表格 4”上，并意识到在“表格 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 的继续按钮上，有一个当前值和下一个值 I目的是当用户单击表单标题时，它会找到最近的“继续”获取当前值，然后我可以通过这种方式隐藏表单。

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

但是这不起作用并显示未定义。我也愿意接受其他方式来实现这一目标。

Answer 1

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

我已将公共(public)类 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>