Question

我有一张最初隐藏的表单。点击流程有两个步骤可以到达表单。单击表单关闭按钮时，我需要重置初始单击操作。

添加示例代码和演示。

这是流程

点击Join Now文字
然后点击文字Click here to open the form文字
然后点击close图标
出现了弹出

我现在需要知道的是，

点击Yes，需要重置表单，屏幕应该看起来与最初的显示方式（带有join now文字的品牌名称框）以及{的初始点击操作{1}}应该刷新。
点击join now，它应保留在同一表格中。
```
No
```

Demo Here

P.S：我不想通过关闭表单来刷新页面。

Answer 1

添加此代码应该这样做。这是关于扭转你的步骤：

$("input[value=Yes]").click(function(){
    //reset - reverse all the steps
    $(".button").show();
    $(".slidethis").fadeOut(800).css("display","none");
    $(".wrapper").css("display","inline-block");
    $(".popup").hide();
    $(".seconddiv").hide();
    $(".firstdiv").show();
});


$("input[value=No]").click(function(){
   $(".popup").hide();

});

更新了小提琴：https://jsfiddle.net/5353ntuf/5/

Answer 2

<强> the accepted answer

您应该在Yes和No两个按钮上添加一个事件点击，因此请为他们提供一个公共类，例如confirm类：

<input type="button" class='confirm' value="Yes" />
<input type="button" class='confirm' value="No" />

然后添加条件以检查您要执行的操作，例如：

//Confirm buttons
$("body").on("click", ".confirm", function() {
  $(".popup").hide();

  if ($(this).val() == 'No') 
  {
    $('form input').val(""); //Reset form
  } else {
    $(".seconddiv,.slidethis").hide();
    $(".firstdiv,.button").show();
    $(".wrapper").css("display", "inline-block");
  }
});

希望这有帮助。

//slide open the main panel
$(".button").click(function(e) {
  e.preventDefault();
  $(this).hide();
  $(".slidethis").fadeIn(800).css("display", "inline-block");
  $(".wrapper").css("display", "block");
});

$(".seconddiv").hide();
//forstdiv click 
$(".firstdiv").click(function() {
  $(this).hide();
  $(".seconddiv").show();
});

//Close button 
$(".close_icon").click(function() {
  $(".popup").show();
});

//Confirm buttons
$("body").on("click", ".confirm", function() {
  $(".popup").hide();

  if ($(this).val() == 'No') {
    $('form input').val("");
  } else {
    $(".seconddiv,.slidethis").hide();
    $(".firstdiv,.button").show();
    $(".wrapper").css("display", "inline-block");
  }
});

.wrapper {
  background: #9ac366;
  display: inline-block;
}

.headcard {
  display: inline-block;
  text-align: center;
  padding: 3% 30px;
  float: left;
}

.slidethis {
  background: #b67fd8;
  padding: 20px 0;
  width: 70%;
  vertical-align: top;
  position: relative;
  height: 228px;
  display: none;
  position: relative
}

.firstdiv,
.seconddiv {
  width: 200px;
  border: #888 solid 2px;
  padding: 20px;
}

.close_icon {
  background: #333;
  color: #fff;
  padding: 4px;
  float: right;
  margin-top: -20px;
  text-decoration: none
}

.popup {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #e4e4e4;
  text-align: center;
  padding-top: 5%;
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="headcard">
    <h4>Brand Name</h4>
    <a href="#" class="button">Join Now </a>
  </div>

  <!--this is hidden by default-->
  <div class="slidethis">

    <div class="firstdiv">
      Click here to open the form
    </div>

    <div class="seconddiv">
      <form>
        <a href="#" class="close_icon">X</a>
        <input placeholder="name" />
        <input placeholder="email" />
      </form>
      <!--close pop up-->
      <div class="popup">
        Closing will clear the form data. Do you want ot close?
        <br/>
        <input type="button" class='confirm' value="Yes" />
        <input type="button" class='confirm' value="No" />
      </div>
    </div>


  </div>
</div>

在另一个按钮单击上取消绑定初始单击功能

2 个答案: