Как из функции JQuery получить значение переменной?

Question

[Алексей]

Народ, всем доброго вечера!
Начал плотно изучать JQuery и никак не могу найти вопрос на казалось бы простой вопрос, который в JavaScript даже не вставал.
Есть глобальная переменная, которая отслеживает шаг квиза. Есть функция, которая отслеживает нажатие кнопки Далее. И есть функция, которая отвечает за появление кнопки Далее при выборе любого input

$(function () {

    var step = 1;

    $(".steps .btn-step").on('click', function nextStep() {
        console.log ("Слайд Шаг: " + step);        
        $(this).closest(".steps").addClass("d-none");
        console.log("delete");
        $(this).closest(".steps").next(".steps").removeClass("d-none");
        console.log("adde");
        step++;
        return step;
    });
   
console.log ("Слайд Шаг: " + step); 

    $(".step-" + step +" label").on('click', function() {
        console.log ("Кнопка Далее: " + step);        
        $(".step-" + step +" .btn").removeClass('d-none');
    });
    
});

Понятно, что все console.log для отслеживания процесса.

Не передаётся step из nextStep в глобальную область видимости для изменения глобальной переменной! И соответственно не срабатывает появление кнопки Далее начиная со второго шага. Что не так пишу?

Comments

[bqio]

Не передаётся куда? Где именно не срабатывает появление кнопки?

[Сергей В]

return step; - бессмысленно, это так не работает.
если хочется заставить работать именно этот код, перенесите создание второго обработчика внутрь первого - при клике на "далее" будет создаваться новый обработчик для следующего поля ввода

[Алексей]

Дмитрий Михальцов, Из области видимости функции nextStep в глобальную.

[Алексей]

Сергей В, Это же разные процессы. nextStep отслеживает нажатие кнопки Далее и переключает на следующий шаг (экран). А анонимная отслеживает выбор пользователя (нажатие любого input'a) на этом экране и только после этого делает кнопку Далее видимой. Как их смешивать? Разный функционал, разные задачи.

И как вообще правильно передавать переменные из области видимости функции в глобальную?

[Сергей В]

Алексей, поймите, у вас проблема не в передаче значения.
если инпутов несколько - каждому должен быть назначен обработчик. в вашем коде он назначается только один раз - для ".step-1"

[Алексей]

Сергей В, В смысле? По клику на кнопку Далее, функция nextStep скрывает текущий div, отображает следующий и увеличиваю глобальную переменную step на 1 (факт увеличения подтверждается console.log, который я ставил после инкремента). После этого, я, как в JavaScript, хочу передать эту переменную в глобальную область видимости, для дальнейших манипуляций. Но проблема именно в том, что nextStep не передаёт её! Почему? Что...jQuery не умеет работать с глобальными переменными и возвращать их изменённые значения?

[Алексей]

Сергей В, А анонимная функция отслеживания инпутов, как раз и ориентируется на значение этой глобальной переменной, которую nextStep должна менять

[Алексей]

Сергей В, И в принципе, если отрешиться от текущего кода...

Как в jQuery получив в функцию глобальную переменную, произведя с ней некие действия (изменив), вернуть в глобальную область видимости заменив изменённым значением существующее?

[Сергей В]

Алексей, возвращать не нужно - значение и так меняется:

[Алексей]

Сергей В, Тогда не понимаю...
Страница загрузилась. Переменная step = 1. Анонимная функция ждёт нажатия на инпуте расположенном в div'e с классом ".step-1". Я кликаю на любом инпуте - появляется кнопка "Далее". По её нажатию срабатывает nextStep, переключает экран и step = 2. Соответственно анонимная функция должна отслеживать нажатие на инпуте расположенном уже в div'e с классом ".step-2". И т.д.

В чём я туплю?

[Сергей В]

$(".step-" + step +" label").on('click', function() {
        console.log ("Кнопка Далее: " + step);        
        $(".step-" + step +" .btn").removeClass('d-none');
    });

этот код ничего не "отслеживает". это назначение обработчика onclick для одного единственного элемента - ".step-1 label"

[Алексей]

Сергей В, Т.е. если у меня 10 вопросов, то мне надо писать ДЕСЯТЬ обработчиков, для каждого шага отдельно?

[Алексей]

Вообщем решил, убрав из селектора анонимной функции класс div'a, оставив один label. Всё заработало! На вопрос мой (как получать Вы ответили - СПАСИБО! Однако в ситуации я так и не разобрался...
Почему в селекторе обработчика переменная step не подставлялась, а внутри функции отлично подставляется и меняет класс?

[Сергей В]

Алексей, сложно из этого обрывка понять вашу затею.

в общем случае - да. каждому элементу нужно назначить обработчик.

в jQuery можно назначить одинаковый обработчик сразу всем элементам, которые соответствуют селектору, например:

$('.hi').on('click' function(){
  alert('hey!');
});

всем элементам, которые в момент выполнения имеют класс "hi" назначится этот обработчик на onlick.

ещё можно назначать заранее описанный обработчик:

function onLabelClick() {
  console.log(this);
}

$('.step1 label').on('click', onLabelClick);

не уверен, поможет ли это как-то вам в вашем случае.

[Bhudh]

Алексей, в селекторе обработчика переменная step и не должна подставляться.
Выражение $(".step-" + step +" label") — это однократное выполнение функции $ с подстановкой актуального на тот момент значения step. То есть 1.
Далее в контексте полученного объекта jQuery выполняется функция on. Которая ничего не знает о переданном в $ селекторе и менять его не может и не собирается.

[Алексей]

Bhudh, Супер! Спасибо!

[Nentra]

Сергей В, не работает так

Answer 1

[chibitko]

Перенесите
$(".step-" + step +" label").on('click', function() {
console.log ("Кнопка Далее: " + step);
$(".step-" + step +" .btn").removeClass('d-none');
});
в обработчик события выше, это не реактивное программирование, без вашего участия это вызывается один раз