基于jQuery实现输入框值变化时的CSS样式动态变更

我来帮你实现这个输入框联动验证码区域显示/隐藏的功能，完整的代码方案如下：

核心需求 #

页脚的邮箱输入框聚焦时自动显示验证码区域；失焦时，根据输入框内的内容长度判断：有内容则保持显示验证码，无内容则隐藏验证码区域。

1. CSS 基础样式 #

先给验证码区域设置初始隐藏的样式：

.captcha-hide {
    display: none;
}

2. jQuery 交互脚本实现 #

首先确保页面已引入jQuery库，然后编写交互逻辑（我修正了原代码里的一个小问题，保证能实时获取输入框的最新内容长度）：

// 获取目标页面元素
var footerEmail = $('footer#footer input.email');
var footerEmailCaptcha = $("footer#footer .captcha-hide");

// 输入框聚焦时，直接显示验证码区域
footerEmail.focus(function() {
    footerEmailCaptcha.css("display", "block");
});

// 输入框失焦时，根据实时输入内容长度判断显示状态
footerEmail.blur(function() {
    // 实时获取当前输入框的内容长度
    var currentInputLength = footerEmail.val().length;
    if (currentInputLength > 0) {
        footerEmailCaptcha.css("display", "block");
    } else {
        footerEmailCaptcha.css("display", "none");
    }
});

小提示：原代码里的footerEmailLength是初始化时的固定值，无法实时更新输入内容的变化，我把它移到了blur事件内部，确保每次失焦都能拿到最新的输入长度。

3. 参考页面结构 #

你的页面结构大概是这样的（供对照参考）：

<footer id="footer">
    <input type="email" class="email" placeholder="请输入你的邮箱">
    <div class="captcha-hide">
        <!-- 验证码区域内容示例 -->
        <p>验证码：<input type="text" placeholder="请填写验证码"></p>
    </div>
</footer>

内容的提问来源于stack exchange，提问作者Naveen L Bhandari