如何在原生 JavaScript 中单击后动态 select class 的下一个实例？

Question

为了使我的表单更易于访问，我想弄清楚的是，如果用户在 Agree 或 Disagree 按钮上按下 enter，tab-focus应该跳到下一个 agree 按钮。我已经为 Agree 按钮 (next-btn) 的每个实例添加了一个 class，所以现在我只需要编写一个函数来关注 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();
        }
    }
}

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

Answer 1

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

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

所以我将 buttons 数组切片为 return 数组中调用 focusHere 函数之后的所有项目，并找到 focusHere 的第一个项目或实例=14=]元素

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();
        }
    }
});

如何在原生 JavaScript 中单击后动态 select class 的下一个实例？

How to dynamically select the next instance of a class after a click in native JavaScript?

javascript

forms

user-interface

focus

tabindex