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 и хотите включить его с помощью кнопки (класс = «Следующий») для того, чтобы изобразить скользящие шаги Инструкцию о экран. Я пытаюсь создать переменную с целочисленным значением, которое может подсчитать количество нажатых кликов и выполнить соответственно. Однако каждый раз, когда я нажимаю следующую кнопку, «1» не добавляется к моей переменной. Любая помощь будет оценена по достоинству.

Answer 1

Проблема заключается в том, что каждый раз, когда нажимается кнопка «next», она пересылает счет на 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; 
     }; 
     }); 

    });