javascript - jQuery - 计算点击次数并相应执行

Question

        $(document).ready(function(){
          $(".next").click(function(){
            var count = 0;
            if (count == 0){
            $(".step1").hide("drop", {direction: "left"}, 400);
            $(".step2").delay(800).show("drop", {direction: "right"}, 800);
            count += 1;
            console.log("first next");
            return;
            };
            if (count == 1){
            $(".step2").hide("drop", {direction: "left"}, 800);
            $(".step3").delay(800).show("drop", {direction: "right"}, 800); 
            count += 1;
            console.log("second next");
            return;
            };
            if (count == 2){
            $(".step3").hide("drop", {direction: "left"}, 800);
            $(".step4").delay(800).show("drop", {direction: "right"}, 800);
            count += 1;
            console.log("third next");
            return;
            };
          });

        });

.processHeader{
    font-family: 'Raleway', sans-serif;
    text-align: center;
    position: fixed;
    top: 0%;
    padding-top: 3%;
    font-weight: bolder;
    left: 50%;
    width: 100%;
    height: 100%;
    font-weight: bold;
    transform: translateX(-50%);
    font-size: 220%;
    display: none;
    color: white;
    z-index: 4;
    opacity: .4;
}
.processContent{
    font-family: 'Raleway', sans-serif;
    text-align: center;
    position: fixed;
    top: 20%;
    left: 50%;
    padding-top: 5%;
    width: 80%;
    height: 100%;
    font-weight: bold;
    transform: translateX(-50%);
    font-size: 220%;
    display: none;
    background-color: white;
    color: rgb(115, 115, 115);
    z-index: 5;
    align-items: center;
    opacity: .4;
}

.next{
  border-radius: 4px;
  background-color: black;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
}
.next span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
.next span:after{
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
.next:hover span{
  padding-right: 25px;
}
.next:hover span:after{
  opacity: 1;
  right: 0;
}
.next:focus{
    outline: none;
}
.steps{
    padding-left: 5%;
    padding-right: 5%;
    font-size: 80%;
}
.step2,
.step3,
.step4{
    display: none;
}

         <div class="processHeader">
           OUR PROCESS
         </div>
         <div class="processContent">
           <div class="steps">
             <div class="step1">
                  OUR FIRST STEP IS BLAH BLAH BLAH BLAH 
                  <br><br>
             </div>
              <div class="step2">
                  OUR SECOND STEP IS BLAH BLAH BLAH BLAH
                  <br><br>
              </div>
              <div class="step3">
                  OUR THIRD STEP IS BLAH BLAH BLAH BLAH 
                  <br><br>
              </div>
              <div class="step4">
                  OUR FOURTH STEP IS BLAH BLAH BLAH BLAH
                  <br><br>
              </div>
            </div>
           <button class="next"><span>NEXT </span></button>

我是 jQuery 的初学者，希望将其与按钮 (class="next") 结合起来，以便在屏幕上描绘滑动指令步骤。我正在尝试创建一个具有整数值的变量，该变量可以计算按下的点击次数，并相应地执行操作。但是，每次我按下一步按钮时，“1”都不会添加到我的变量中。任何帮助将不胜感激。

Answer 1

您的问题是，每次单击“下一步”按钮时，都会将计数重置为 0。每次单击按钮时，单击监听器都会作为全新函数调用，因此您需要初始化计数变量在它之外。

    $(document).ready(function(){
      var count = 0;  <<-- should be initialized outside of click listener
      $(".next").click(function(){         
        if (count == 0){
        $(".step1").hide("drop", {direction: "left"}, 400);
        $(".step2").delay(800).show("drop", {direction: "right"}, 800);
        count += 1;
        console.log("first next");
        return;
        };
        if (count == 1){
        $(".step2").hide("drop", {direction: "left"}, 800);
        $(".step3").delay(800).show("drop", {direction: "right"}, 800); 
        count += 1;
        console.log("second next");
        return;
        };
        if (count == 2){
        $(".step3").hide("drop", {direction: "left"}, 800);
        $(".step4").delay(800).show("drop", {direction: "right"}, 800);
        count += 1;
        console.log("third next");
        return;
        };
      });

    });