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

为了让我的表单更容易访问，我想弄明白的是，如果用户在

同意

或

不同意

按钮上按enter键，选项卡焦点应该跳到下一个

同意

按钮。我已经为

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>

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

因此，我使用

数组#forEach

遍历数组并获取按钮的索引

因此，我使用

按钮

数组，因为它包含所有

按钮.按钮标签

元素和

。下一个btn

元素有

按钮标签

类

因此，我对

按钮

数组进行切片，以返回数组中调用

focusher

函数后的所有项目，并找到

的第一个项目或实例。下一个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();
        }
    }
});

---

嘿，就是这个！我认为将东西添加到数组和迭代将是正确的方法，但作为初学者，我不确定如何编写它。我需要修改的一件事是

buttons.slice（I）.find

应该是

buttons.slice（I+1）.find

。该更改确保如果选择了

agree

按钮，它将跳到下一个agree按钮，而不会重新关注当前元素。

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