本文详解电子投票界面中“pisca”（闪烁）类在多个输入位间正确传递的实现原理，解决因dom引用未实时更新导致仅能触发一次高亮迁移的问题。
本文详解电子投票界面中“pisca”（闪烁）类在多个输入位间正确传递的实现原理，解决因dom引用未实时更新导致仅能触发一次高亮迁移的问题。
在构建电子投票机（Urna Eletrônica）界面时，一个关键交互逻辑是：用户点击数字按钮后，该数字应填入当前处于闪烁状态（即拥有 .pisca 类）的输入位，并自动将闪烁效果移至下一个 .digitos-tela 元素，从而引导用户依次输入多位数字（如候选人编号）。然而，原始代码中闪烁效果只能从第一个输入框传递到第二个，后续便停滞不动——根本原因在于 对 DOM 元素的引用未随状态变化动态更新。
问题定位：静态引用导致状态脱节
原始代码中存在如下关键初始化语句：
this.digito = document.querySelector(".digitos-tela"); // ❌ 静态获取首个元素该行仅在实例化时执行一次，始终指向第一个 .digitos-tela 元素。而在 adicionaTela() 方法中，却错误地基于这个固定引用操作：
this.digito.innerText += el.innerText; // 始终向第一个框追加
this.digito.classList.remove("pisca"); // 始终移除第一个框的 pisca
this.digito.nextElementSibling.classList.add("pisca"); // 始终给第二个框添加 pisca这导致无论当前哪个框实际拥有 .pisca 类，逻辑都强行作用于“第一个框 → 第二个框”，完全忽略真实焦点位置，因此后续切换失效。
正确解法：始终以当前 .pisca 元素为操作基准
修复核心在于 放弃缓存 .digitos-tela 的初始引用，转而每次动态查找当前带有 .pisca 类的元素。由于 this.pisca 已在构造函数中定义为 document.querySelector(".pisca")，且在 adicionaTela() 中被显式更新，我们应统一使用 this.pisca 作为操作主体：
this.adicionaTela = (el) => {
// ✅ 正确：向当前闪烁框追加数字
this.pisca.innerText += el.innerText;
// ✅ 正确：移除当前闪烁框的 pisca 类
this.pisca.classList.remove("pisca");
// ✅ 正确：为紧邻的下一个 .digitos-tela 添加 pisca 类
const nextInput = this.pisca.nextElementSibling;
if (nextInput && nextInput.classList.contains("digitos-tela")) {
nextInput.classList.add("pisca");
this.pisca = nextInput; // ? 关键：同步更新 this.pisca 引用
} else {
console.warn("已到达最后一位输入框，无法继续移动焦点");
}
};⚠️ 重要补充：
this.pisca = nextInput这一行不可或缺。它确保下一次调用adicionaTela()时，this.pisca指向的是新激活的输入框，形成闭环状态同步。若遗漏此赋值，this.pisca将永远停留在初始元素，导致后续所有操作再次失效。
完整可运行修复版关键逻辑（整合进类）
function urnaEletronica() {
this.contador = document.querySelector(".contador");
this.pisca = document.querySelector(".pisca"); // ✅ 初始即定位首个 pisca 元素
this.inicia = () => {
this.capturaCliques();
this.atualizaTimer();
};
// ...（timer 相关逻辑保持不变）...
this.capturaCliques = () => {
document.addEventListener("click", (event) => {
const el = event.target;
if (el.classList.contains("numeros")) {
this.adicionaTela(el);
}
});
};
this.adicionaTela = (el) => {
// 确保只操作当前 pisca 元素
if (!this.pisca) return;
this.pisca.innerText += el.innerText;
this.pisca.classList.remove("pisca");
const nextInput = this.pisca.nextElementSibling;
if (nextInput && nextInput.classList.contains("digitos-tela")) {
nextInput.classList.add("pisca");
this.pisca = nextInput; // ✅ 动态更新引用，维持状态一致性
}
};
}
const urna = new urnaEletronica();
urna.inicia();注意事项与增强建议
-
健壮性检查：如上所示，在操作
nextElementSibling前务必验证其存在性及是否为合法输入框（classList.contains("digitos-tela")），避免 DOM 异常。 - 边界行为处理：当到达最后一个输入框时，可选择禁用数字按钮、播放提示音或自动聚焦确认按钮，提升用户体验。
-
键盘支持（可选）：为无障碍访问，建议补充
keydown事件监听，允许用户通过数字键输入。 -
CSS 动画优化：
.pisca的@keyframes已合理，但可增加animation-fill-mode: both防止动画结束后样式突变。
通过将操作锚点从静态 DOM 查询结果（this.digito）切换为动态维护的状态变量（this.pisca），并严格保证每次状态变更后立即更新该变量，即可完美实现多输入位间的流畅、可靠焦点传递。
