Как адекватнее сделать переходы по якорям по клику одной кнопки?

Question

[Евгений]

Есть к примеру страничка. На нет кнопка "Перейти к следующему".

Так же на странице куча инпутов различного характера. Но среди них есть инпуты по которым нужно "прыгать" по клику на эту кнопку. Причём повторный клик делает переход к следующему инпуту с нужным идентификатором / классом.

Как это лучше реализовать? Задавать общий класс инпутам по которым нужно прыгать и при помощи Jquery по клику брать все элементы с таким классом и последовательно на каждый клик делать фокус последовательно переходить к элементу? Или можно сделать ещё проще?

Answer 1

[syntaxorange]

Концептуально вы описали самый разумный подход. Только в реализации вижу пробелы. Якоря работают через идентификаторы, никаких классов.
Сперва кэшируем (фильтруем при необходимости) обёрнутый набор инпутов при инициализации программы (если они не добавляются динамически), а не в момент клика. Кнопке (элементу a), устанавливаем `href` идентификатор первого инпута. В коллбэке клика ищем релевантный `href` инпут по айди. Интересует нас не он, а следующий, идущий за ним инпут где-то в дереве DOM. Извлекаем идентификатор у него и перезаписываем `href` нашей "кнопке" порождающей событие клика.

Comments

[Евгений]

Сделал чуть по другому

$(document).ready(function() {
        let errors = $(document).find('.invalid-val');
        let i = 0;
        $('#correct_errors').click(function (e){
            /**
             * Удаляем атрибут предыдущего элемента если это не первый элемент
             * Если это первый элемент, удалим последний
             */
            if (i > 0){
                $(errors[i-1]).removeAttr("id");
            }else {
                $(errors[errors.length]).removeAttr("id");
            }
            $(errors[i]).attr('id', 'error');
            i++;
            /**
             * Если мы долшли до последнего элемента, обнулим счётчик дабы пойти по элементам DOM заново
             */
            if (i === errors.length){
                i = 0;
            }
        })
    });

[syntaxorange]

Евгений, Как вариант