Вложенная инструкция JS if не работает должным образом

Question

Я использую счетчик для отображения соответствующей информации при каждом нажатии, но я не могу заставить кнопку работать за один клик. Я считаю, что правильно добавляю к своему счетчику, но по какой-то причине он не регистрируется должным образом. Любые изменения будут оценены.

$(document).on("click", ".proceedBtn", function() { 
 
      $i = 0; 
 
      $i = $i + 1; 
 
      if ($i == 1){ 
 
       if ($i == 2){ 
 
        $('#billingQuestions').hide(); 
 
        $('#billingQuestions2').hide(); 
 
        $('#noQuestions').hide(); 
 
        $('#noQuestions2').hide(); 
 
        $('#paymentInfo').show(); 
 
        $('#paymentInfo2').show(); 
 
        $('.arrow').css('left', '84%'); 
 
        console.log("payment"); 
 
        return; 
 
       } 
 
       $('#noQuestions').show(); 
 
       $('#noQuestions2').show(); 
 
       $('#billingQuestions').hide(); 
 
       $('#billingQuestions2').hide(); 
 
       $('#paymentInfo').hide(); 
 
       $('#paymentInfo2').hide(); 
 
       $('.arrow').css('left', '50%'); 
 
       $i++; 
 
       console.log("shipping"); 
 
       return; 
 
      }  
 
     });

Answer 1

переменная $ я всегда 0 при нажатии кнопки так, когда вы делаете сумму $ я + 1 всегда 1.

Кроме того, у вас есть много ID на вашей странице, не можете ли вы использовать класс для элементов, которые вы хотите скрыть и показать? Проверьте структуру своей страницы, вы можете оптимизировать свой html и их классы/ID

Answer 2

Помните, что все функции внутри выполняются после каждого нажатия.

$(document).on("click", ".proceedBtn", function() { 
    $i = 0;    // On every click $i is reset to 0 
    $i = $i + 1;   // Now $i == 1 
    if ($i == 1) {  // So this condition is always true 
     if ($i == 2) { // And this condition is always false 
      ...   // That's why this part is never executed 
     } 
    } 
} 

То, что вы, вероятно, нужно это:

$i = 0; 
$(document).on("click", ".proceedBtn", function() { 
    $i = $i + 1; 
    if ($i == 1){ 
     $('#noQuestions').show(); 
     $('#noQuestions2').show(); 
     $('#billingQuestions').hide(); 
     $('#billingQuestions2').hide(); 
     $('#paymentInfo').hide(); 
     $('#paymentInfo2').hide(); 
     $('.arrow').css('left', '50%'); 
     console.log("shipping"); 
    }  
    else if ($i == 2){ 
     $('#billingQuestions').hide(); 
     $('#billingQuestions2').hide(); 
     $('#noQuestions').hide(); 
     $('#noQuestions2').hide(); 
     $('#paymentInfo').show(); 
     $('#paymentInfo2').show(); 
     $('.arrow').css('left', '84%'); 
     console.log("payment"); 
    } 
});