如何更优雅地实现HTML页面中peso输入框的循环切换功能？

当然有更简洁优雅的实现方式！你的需求是每次调用setWeight()时给当前聚焦的.peso输入框赋值，然后自动切换到下一个输入框，最后一个的话回到第一个——原代码依赖DOM结构遍历，确实可以简化，下面是更清晰的实现方案：

优化后的JS代码 #

// 缓存所有.peso输入框，避免每次调用都重复查询DOM
const pesoInputs = $('.peso');

function setWeight(weight) {
  // 获取当前聚焦输入框在集合中的索引
  const currentIndex = pesoInputs.index(document.activeElement);
  
  // 仅当聚焦的是.peso输入框时执行操作
  if (currentIndex !== -1) {
    // 为当前输入框设置值
    const currentInput = pesoInputs.eq(currentIndex);
    currentInput.data('peso', weight).val(weight.formatMoney(2));
    
    // 计算下一个输入框的索引：最后一个则回到第一个，否则索引+1
    const nextIndex = (currentIndex + 1) % pesoInputs.length;
    // 聚焦到下一个输入框
    pesoInputs.eq(nextIndex).focus();
  }
}

核心优化点说明 #

• DOM查询缓存：把所有.peso输入框集合缓存到全局变量中，避免每次调用函数都重复遍历DOM，既提升性能又让逻辑更聚焦。
• 索引直接管理：用index()方法直接获取当前聚焦元素在集合中的位置，不用再通过closest('tr')、next('tr')去依赖表格DOM结构，逻辑更直观，也减少了结构变化导致的代码失效风险。
• 极简循环逻辑：用取模运算(currentIndex + 1) % pesoInputs.length一行搞定“最后一个回到第一个”的循环判断，替代原代码的分支条件，简洁又可靠。
• 鲁棒性更强：代码直接针对.peso元素集合操作，不依赖父级<tr>的结构，后续表格布局调整时更不容易出问题。

内容的提问来源于stack exchange，提问作者Babblo