Question

请帮助我，我认为这是一个简单的问题，因为我不是Jquery的专业人士转到link

<div class="container">

  <!--  Step1Content-->
  <div class="Step1Content">
    <h1>Step1</h1>
    <p>Please Enter Your ID</p>

  </div>

  <!--  Step2Content-->
  <div class="Step2Content">
    <p>Step2</p>
    <h5>Thanks</h5>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Last Name">
    <input type="text" placeholder="Email">
  </div>

  <!--  Step3Content-->
  <div class="Step3Content">
    <p>Step3</p>
    <h5>Thanks</h5>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Last Name">
    <input type="text" placeholder="Email">
  </div>

  <!--  Step4Content-->
  <div class="Step4Content animated slideInRight">
    <p>Step4</p>
    <h3>End Of The Line</h3>
  </div>

  <!--  Buttons-->
  <button class="btn btn-default Step1Btn" style="float:left"> Step One </button>
  <button class="btn btn-default Step2Btn" style="float:right"> Step 2 &raquo; </button>
</div>

CSS：它并不重要

body {
  background-color: black;
}

h1,
p {
  color: deepskyblue;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.Step1Content,
.Step2Content,
.Step3Content,
.Step4Content {
  width: 50%;
  margin-bottom: 30px;
  margin: 20px auto;
}

JS：

$(document).ready(function() {
  $(".Step1Content").show();
  $(".Step2Content").hide();
  $(".Step3Content").hide();
  $(".Step4Content").hide();
  $(".Step1Btn").hide();
  $(".Step2Btn").show();

  $(".Step1Btn").click(function() {
    $(".Step2Content").hide();
    $(".Step1Content").show();
    $(".Step1Btn").hide();
    $(".Step3Btn").html("Step 2 &raquo;");
    $(".Step3Btn").addClass("Step2Btn");
    $(".Step3Btn").removeClass("Step3Btn");
  })

  $(".Step2Btn").click(function() {
    $(".Step2Content").show();
    $(".Step1Content").hide();
    $(".Step1Btn").show();
    $(".Step1Btn").html("&laquo; Step 1");
    $(".Step2Btn").html("Step 3 &raquo;");
    $(".Step2Btn").addClass("Step3Btn");
    $(".Step2Btn").removeClass("Step2Btn");
  })

  $(".Step3Btn").click(function() {
    $(".Step2Content").hide();
    $(".Step3Content").show();
    $(".Step3Btn").html("Step 4 &raquo;");
    $(".Step1Btn").html("&laquo; Step 2");
    $(".Step3Btn").addClass("Step4Btn");
    $(".Step3Btn").removeClass("Step3Btn");
  })
})

并找出为什么当用户点击第3步按钮时，没有什么事情不会发生我希望当用户点击带有 Step3Btn 类的第3步按钮时，Step2Content消失，Step3Content显示
我甚至试过alert（）并且理解了Step3Btn上的函数根本不起作用，即使它在我使用inspect元素时它有这个类

Answer 1

问题是您的Step3Btn按钮是动态的，您需要这样做

$('.container').on('click','.Step3Btn',function() {
    $(".Step2Content").hide();
    $(".Step3Content").show();
    $(".Step3Btn").html("Step 4 &raquo;");
    $(".Step1Btn").html("&laquo; Step 2");
    $(".Step3Btn").addClass("Step4Btn");
    $(".Step3Btn").removeClass("Step3Btn");
})

为了安全起见，我会将其应用于您的所有按钮功能

Answer 2

您的点击功能只会将处理程序附加到已存在的元素。你正在动态添加Step3Btn类。所以你需要改变代码

如果你的jQuery＆lt; 1.7

  $('.Step3Btn').live( 'click', function() {
      //your code
    })

否则

 $('.container').on('click','.Step3Btn',function() {
  //your code
 })

JQuery中的addClass（）错误

2 个答案: