在原生 JavaScript 中单击后如何动态选择类的下一个实例？

问题描述

为了使我的表单更易于访问，我想弄清楚的是，如果用户在 Agree 或 disagree 按钮上按下 Enter，标签焦点应该跳过到下一个 agree 按钮。我已经为 Agree 按钮 (next-btn) 的每个实例添加了一个类，所以现在我只需要编写一个函数来关注 next-btn 的下一个实例。

HTML 如下：

<form id="quiz" style="text-align: center;">
<div id="questions">
    <div class="list-group-item">
        <p>I often make spontaneous or last-minute decisions</p>
        <div class="btn-group btn-group-justified button-wrap">
            <div class="btn-group"><input tabindex="-1" type="radio" name="q1" id="yes-q1" value="yellow" class="btn agree-btn" required/><label tabindex="0" class="button-label next-btn" for="yes-q1">Agree</label></div>
            <div class="btn-group"><input tabindex="-1" type="radio" name="q1" id="no-q1" value="blue" class="btn disagree-btn"/><label tabindex="0" class="button-label" for="no-q1">disagree</label></div>
        </div>
    </div>
<div class="list-group-item">
    <p>My ideas are often unconventional or radical</p>
    <div class="btn-group btn-group-justified button-wrap"> 
        <div class="btn-group"><input tabindex="-1" type="radio" name="q2" id="yes-q2" value="yellow" class="btn agree-btn" required/><label tabindex="0" class="button-label next-btn" for="yes-q2">Agree</label></div>
        <div class="btn-group"><input tabindex="-1" type="radio" name="q2" id="no-q2" value="blue" class="btn disagree-btn" required/><label tabindex="0" class="button-label" for="no-q2">disagree</label></div>
    </div>
</div>
            <div class="list-group-item">
                <p>I am naturally inclined to step forward and lead the group</p>
                <div class="btn-group btn-group-justified button-wrap">
                    <div class="btn-group"><input tabindex="-1" type="radio" name="q3" id="yes-q3" value="red" class="btn agree-btn" required/><label tabindex="0" class="button-label next-btn" for="yes-q3">Agree</label></div>
                    <div class="btn-group"><input tabindex="-1" type="radio" name="q3" id="no-q3" value="blue" class="btn disagree-btn" required/><label tabindex="0" class="button-label" for="no-q3">disagree</label></div>
                </div>
            </div>

        </div>
        <button id="submit-btn" class="btn btn-primary btn-lg" type="submit" value="Submit" style="margin-top: 50px;">Submit</button>
    </form>

我编写的相关 JavaScript 在这里：

const buttons = document.querySelectorAll(".button-label");

for(let answerButton of buttons) {
    answerButton.addEventListener('keydown',focusHere);

    // Simulate click event on tab + entering (accessiblity feature)
    function focusHere(event) {
        if (event.key == 'Enter') {
            // Trigger the click for the input
            answerButton.click();
            // Set focus to the next Agree button (next question)
            document.querySelector(".next-btn").focus();
        }
    }
}

有人对我如何使用当前表单设置指定类的下一个实例有任何建议吗？感谢您的帮助。

解决方法

所以我使用 Array#forEach 遍历数组并获取按钮的索引。

所以我使用 buttons 数组，因为它包含所有 button.button-label 元素，而 .next-btn 元素具有 .button-label 类。

所以我将 buttons 数组切片以返回数组中调用 focusHere 函数之后的所有项目，并找到了 .next-btn 元素的第一个项目或实例

const buttons = [...document.querySelectorAll(".button-label")];

buttons.forEach((answerButton,i) => {
    answerButton.addEventListener('keydown',focusHere);

    function focusHere(event) {
        if (event.key == 'Enter') {
            answerButton.click();
            buttons.slice(i).find(btn => btn.classList.contains('next-btn')).focus();
        }
    }
});