解除绑定另一个按钮点击上的初始点击功能

Question

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

添加示例代码和演示。

流程就到这里了

• 单击

  Join Now

  文字
• 然后点击文字

  Click here to open the form

  文字
• 然后单击

  close

  图标
• 弹出窗口来了

我现在需要知道的是，

1. 通过单击

   Yes

   ，需要重置表单，并且屏幕应看起来像最初的样子（带有

   join now

   文本的品牌名称框），并且应刷新

   join now

   的初始单击操作。

2. 通过单击

   No

   ，它应该保持在相同的表单上。

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

演示在这里

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

工作小提琴。

您应该添加一个单击两个按钮

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>