通过WordPress插件添加的jQuery代码不生效，如何排查？

你遇到的情况是代码能正常执行（控制台输出日志），但锚点元素未成功添加目标类，可按以下步骤逐一排查：

• 确认jQuery加载状态：在浏览器控制台输入jQuery，回车后若返回function(a,b){...}类函数体，说明jQuery已正常加载；若返回undefined，则说明你的代码执行时机早于jQuery加载，需调整代码加载顺序，确保在jQuery之后执行。

• 检查DOM就绪时元素是否存在：

  1. 在控制台执行jQuery("a").length，若返回0，说明document.ready触发时锚点元素还未被渲染到DOM中（比如是AJAX加载、动态生成的内容）。
  2. 这种情况可尝试改用window.load事件（等待所有资源加载完成）：

     jQuery(window).on('load', function(){
         jQuery("a").addClass("test7");
         console.log("code running on load");
     });
     

  3. 也可直接在控制台手动执行jQuery("a").addClass("test7")，如果此时类能成功添加，就证明是元素加载时机的问题，需换成监听动态内容加载的方式（比如MutationObserver，或绑定到内容加载完成的自定义事件）。

• 检查选择器与元素范围：

  • 确认锚点元素不在iframe内，iframe里的元素需要用jQuery("iframe").contents().find("a")才能选中。
  • 检查元素是否被设置为display: none或隐藏在未渲染的容器中，这类元素虽存在于DOM，但可能在就绪时未被正确解析。

• 验证类是否被添加（视觉无变化≠未添加）：

  1. 打开浏览器开发者工具（F12），选中任意锚点元素，查看Elements面板的类列表，确认是否有test7类。
  2. 如果类存在但样式无变化，检查test7的CSS规则是否被其他更高优先级的样式覆盖（比如行内样式、ID选择器样式），可在Styles面板查看test7的样式是否被划掉。

• 检查代码执行顺序：查看页面源码，确认你的代码所在的<script>标签在WordPress加载jQuery的<script>标签之后。WordPress默认在头部加载jQuery，若用插件添加代码到头部，需确保插件未将代码放在jQuery之前。

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