本文详解为何$("title"+id)等jQuery选择器失效——根本原因是遗漏ID选择器必需的#符号，导致jQuery查找不存在的HTML标签而非对应ID的元素。
本文详解为何`$("title"+id)`等jquery选择器失效——根本原因是遗漏id选择器必需的`#`符号，导致jquery查找不存在的html标签而非对应id的元素。
在使用 jQuery 操作 DOM 元素时，选择器语法的准确性直接决定代码是否生效。你遇到的问题——第1、2行不工作（如 $("title"+id)、$("edit"+id)），而第3、4行能正常运行——其根源并非 jQuery 本身缺陷，而是 CSS 选择器语义理解偏差。
? 问题定位：$("title"+id) 是什么？
该写法等价于：
$("title123") // → 查找 <title123> 标签（HTML 中根本不存在！）</title123>
jQuery 将其解析为「标签名选择器」，试图匹配名为 title123 的 HTML 元素（如
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
元素。
✅ 正确写法应使用 ID 选择器语法：$("#title" + id)
同理：
- $("edit" + id) → ❌ 错误：查找
标签 - $("#edit" + id) → ✅ 正确：查找 id="edit123" 的元素
- $("done" + id) → ❌
- $("#done" + id) → ✅
- $("input" + id) → ❌（且 input 是标签名，非ID；此处应为 $("#input" + id)）
- $("#input" + id) → ✅
✅ 修正后的 handler 函数
function handler(id) {
$("#title" + id).attr("hidden", true); // 隐藏标题段落
$("#edit" + id).attr("hidden", true); // 隐藏编辑按钮
$("#done" + id).removeAttr("hidden"); // 显示提交按钮
$("#input" + id).removeAttr("hidden"); // 显示输入框
}
⚠️ 注意事项
- attr("hidden", true) 等价于添加 hidden="hidden" 属性，语义正确；也可用 hide()（CSS display: none），但二者行为略有差异（hidden 属于可访问性语义，hide() 仅视觉隐藏）。
- 确保 jQuery 已加载，且 handler() 调用时 DOM 已就绪（推荐包裹在 $(document).ready(...) 内）。
- 模板中
生成的 ID 合法（无空格/特殊字符），符合 CSS ID 命名规范，可安全用于 # 选择器。
? 验证技巧：浏览器控制台快速调试
在开发者工具中执行：
$("#title123").length // → 应返回 1（存在）
$("title123").length // → 返回 0（不存在，印证错误原因）
掌握选择器本质（# = ID，. = class，无符号 = tag），是避免此类“看似随机失效”问题的关键。jQuery 强大，但绝不替你纠正选择器逻辑——精准定位，始于一个小小的 #。
