Javascript 单击按钮，关注下一个元素

我的目的是当按钮触发

mouseup

事件时，将焦点移动到下一个输入元素，下面是脚本：

var cleared = false;
$(document).ready(function(){

    //focus on first element
    var focused = null;
    $(".inp").focus(function () {
        focused = $(this);
    }).first().focus();

   //when mousedown, set value 4
    $("#btn").mousedown(function(e) {
        focused.val("4");  
    }).mouseup(function(e) {

        //when mouseup, change bg color
        focused.css("background-color","yellow");

        //and focus on next element
        if (focused && focused.length) {
            focused.next(".inp").focus();
        }       
    });
});

以下是我的html元素：

    <table>     
        <tr>
            <td>ABC</td>
            <td><input class="inp"/></td>
            <td><input class="inp"/></td>
            <td><input class="inp"/></td>
        </tr>
    </table>
<button id="btn">4</button>Good

基础知识
好的

---

我的问题是焦点从未设置下一个元素，我如何解决这个问题？

尝试将焦点放在下一个元素上

 $(this).trigger("keydown", [9]);

替换代码中的以下内容

   if (focused && focused.length) {
        focused.next(".inp").focus();
    }

：获取匹配元素集中每个元素紧跟其后的同级元素。如果提供了选择器，则仅当它与该选择器匹配时，才会检索下一个同级

对于类

inp

，您没有“紧跟兄弟姐妹”，因此您必须向上移动一次到父级

td

，然后使用

next（）

功能移动到下一个td，然后在此td内找到类

inp

，并执行聚焦

只需更换：

focused.next(".inp").focus();

focused.parent().next().find(".inp").focus();

var cleared = false;
$(document).ready(function(){

    //focus on first element
    var focused = null;
    $(".inp").focus(function () {
        focused = $(this);
    }).first().focus();

   //when mousedown, set value 4
    $("#btn").mousedown(function(e) {
        focused.val("4");  
    }).mouseup(function(e) {

        //when mouseup, change bg color
        focused.css("background-color","yellow");

        //and focus on next element
        if (focused && focused.length) {
            focused.parent().next().find(".inp").focus();
        }       
    });
});

作者：

focused.next(".inp").focus();

focused.parent().next().find(".inp").focus();

var cleared = false;
$(document).ready(function(){

    //focus on first element
    var focused = null;
    $(".inp").focus(function () {
        focused = $(this);
    }).first().focus();

   //when mousedown, set value 4
    $("#btn").mousedown(function(e) {
        focused.val("4");  
    }).mouseup(function(e) {

        //when mouseup, change bg color
        focused.css("background-color","yellow");

        //and focus on next element
        if (focused && focused.length) {
            focused.parent().next().find(".inp").focus();
        }       
    });
});

完整JS:

focused.next(".inp").focus();

focused.parent().next().find(".inp").focus();

var cleared = false;
$(document).ready(function(){

    //focus on first element
    var focused = null;
    $(".inp").focus(function () {
        focused = $(this);
    }).first().focus();

   //when mousedown, set value 4
    $("#btn").mousedown(function(e) {
        focused.val("4");  
    }).mouseup(function(e) {

        //when mouseup, change bg color
        focused.css("background-color","yellow");

        //and focus on next element
        if (focused && focused.length) {
            focused.parent().next().find(".inp").focus();
        }       
    });
});

---

希望这有帮助。

您需要

focused.parent（）.next（）.find（'.inp'）.focus（）@DOCASAREL，哇，问题解决了！非常感谢。但是我不知道里面的逻辑。因为你在
中有一个输入的引用，所以你需要访问它的父项（
）。之后，您可以访问它的下一个元素（以下
），并在其中找到
.inp
元素，这是您想要关注的元素。@zakariaAcharki完成了全部工作！我太慢了。很高兴你喜欢它。欢迎您再来！