本文讲解如何通过 jQuery 监听输入框内容变化，动态显示后续隐藏的 元素，重点解决 keyup 事件失效、选择器错误及 CSS 类名不匹配等常见问题，并推荐更健壮的 change 事件替代方案。
本文讲解如何通过 jquery 监听输入框内容变化，动态显示后续隐藏的 `` 元素，重点解决 `keyup` 事件失效、选择器错误及 css 类名不匹配等常见问题，并推荐更健壮的 `change` 事件替代方案。
要实现“当某个 中的左侧输入框（inputfield_smpc）填入内容后，自动显示其后紧邻的下一个 ”，关键在于：精准定位目标元素、选择合适的触发时机、正确控制显示状态。原始代码存在三处核心问题：
- 事件选择不当：keyup 仅响应键盘输入，无法捕获浏览器自动填充（autofill）、粘贴（paste）或手动清空后重填等场景；
- 选择器语法错误：$(span.xyz) 缺少引号，应为 $('span.xyz')，且未限定作用域，易误选非相邻元素；
- 类名逻辑矛盾：HTML 中初始隐藏使用 class="display_none"，但 jQuery 中调用 .removeClass('display_none') 前，该 class 实际并不存在于目标 的 DOM 属性中（因 PHP 循环生成的后续 确实含此 class，但选择器未准确定位到“下一个”）。
✅ 正确做法如下：
✅ 推荐使用 change + blur 双事件保障兼容性
$('input[name="inputfield_smpc"]').on('change blur', function() {
const $currentSpan = $(this).closest('span.xyz');
const $nextSpan = $currentSpan.next('span.xyz');
if ($(this).val().trim() !== '') {
$nextSpan.removeClass('display_none').addClass('display_inline');
// 或直接操作样式（绕过 class 依赖）：
// $nextSpan.css('display', 'inline');
}
});
✅ HTML 结构优化建议（增强可维护性）
为避免多个同名 name 导致选择混乱，建议为每组输入添加唯一标识：
<span class="datalist-group display_inline xyz" data-index="0">
<input type="text" class="datalist_2row_left" name="inputfield_smpc_0" value=""><input type="text" class="datalist_2row_right" name="inputfield_evmpd_0" value=""></span>
<!-- 后续组 -->
<span class="datalist-group display_none xyz" data-index="1">
<input type="text" name="inputfield_smpc_1" value=""><input type="text" name="inputfield_evmpd_1" value=""></span>
⚠️ 注意事项
- 不要依赖 keyup 单一事件：用户通过右键粘贴、拖拽填充、密码管理器自动填写时，keyup 不触发，change 在失焦时生效，input 事件可实时监听（但需防抖避免高频执行）；
-
确保 CSS 类定义有效：
.display_none { display: none; } .display_inline { display: inline; } /* 或 inline-block 更稳妥 */ - 边界处理：.next('span.xyz') 仅匹配紧邻的同级 ，若中间插入其他元素会失效，此时可用 $('span.xyz').eq($currentSpan.index() + 1) 精确索引定位；
- 初始化逻辑：若需支持回填（如用户清空后重新输入），应在事件中统一判断值是否非空，而非仅追加 class。
通过以上调整，即可稳定实现“前一个输入有值 → 下一个容器显示”的链式交互，兼顾可访问性、兼容性与代码健壮性。
