输入框聚焦或已填写时添加/移除父元素类的问题排查

看起来你是在给Contact Form 7的输入框做交互样式，WordPress更新后代码失效大概率和jQuery的使用方式、CF7的DOM结构变化或者事件绑定时机有关。先把你没写完的代码补全，再一步步排查问题：

首先，先还原你原本想实现的完整代码：

$('.wpcf7-form-control').each(function() { 
  //console.log($(this)); 
  $(this).on('focus', function() { 
    $(this).parent().parent().addClass('active'); 
  }); 
  $(this).on('blur', function() { 
    if ($(this).val().length == 0) { 
      $(this).parent().parent().removeClass('active'); 
    } 
  });
});

下面是针对WordPress更新后失效的常见修复方案：

1. 解决jQuery无冲突模式问题（最常见） #

WordPress默认启用了jQuery的noConflict()模式，直接用$会报错，必须换成jQuery或者在回调里定义别名：

jQuery(document).ready(function($) { // 这里把$作为参数传入，内部可以正常使用$
  $('.wpcf7-form-control').each(function() { 
    $(this).on('focus', function() { 
      $(this).closest('.your-target-parent').addClass('active'); // 用closest替代层级选择器，更可靠
    }); 
    $(this).on('blur', function() { 
      if ($.trim($(this).val()).length === 0) { // 加trim处理空格输入
        $(this).closest('.your-target-parent').removeClass('active'); 
      }
    });

    // 补充：页面加载时检查已有内容的输入框，自动添加active类
    if ($.trim($(this).val()).length > 0) {
      $(this).closest('.your-target-parent').addClass('active');
    }
  });
});

注意把.your-target-parent换成你实际要加类的父元素的类名，不要依赖parent().parent()这种固定层级——WordPress更新后CF7的DOM结构可能变了，层级选择器会失效。

2. 处理CF7动态加载的情况 #

如果你的表单是通过AJAX加载（比如用了页面切换、加载更多插件），页面初始化时$('.wpcf7-form-control')可能还不存在，事件绑定会失败，这时候要用事件委托：

jQuery(document).ready(function($) {
  // 把事件绑定到静态的父元素（比如document），动态生成的元素也能触发
  $(document).on('focus', '.wpcf7-form-control', function() {
    $(this).closest('.your-target-parent').addClass('active');
  });

  $(document).on('blur', '.wpcf7-form-control', function() {
    if ($.trim($(this).val()).length === 0) {
      $(this).closest('.your-target-parent').removeClass('active');
    }
  });

  // 初始检查已加载的表单
  $('.wpcf7-form-control').each(function() {
    if ($.trim($(this).val()).length > 0) {
      $(this).closest('.your-target-parent').addClass('active');
    }
  });
});

3. 排查其他潜在问题 #

• 打开浏览器控制台（F12）看有没有JS报错，比如其他插件的代码报错会阻断你的脚本执行；
• 确认你的JS文件是在jQuery之后加载的，最好用WordPress的wp_enqueue_script函数加载，并且声明依赖jQuery；
• 检查CF7的DOM结构，用浏览器元素审查工具确认closest('.your-target-parent')能正确选中你要的父元素。

内容的提问来源于stack exchange，提问作者Denis S.