输入字段中值更改的 CSS 更改。 jQuery答案

【问题标题】：Css change on value change in input field. jQuery输入字段中值更改的 CSS 更改。 jQuery
【发布时间】：2018-04-25 09:08:20
【问题描述】：

var footerEmail = $('footer#footer input.email');
        var footerEmailLength = footerEmail.val().length;
        var footerEmailCaptcha = $("footer#footer .captcha-hide");

        footerEmail.focus( function() {
            footerEmailCaptcha.css("display","block");
        });


        footerEmail.blur( function() {
            if(footerEmailLength > 0) {
                footerEmailCaptcha.css("display","block");
            }
            else if (footerEmailLength == 0) {
                footerEmailCaptcha.css("display","none");
            }
        });

.captcha-hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<footer id="footer">
  <input class='email'>
  <div class="captcha-hide">Testing</div>
</footer>

我想确保当我在文本（输入）字段中输入内容时 onblur 可以正常工作。

首先，如果模糊函数内部的条件不起作用，因为它将初始值设为“0”。当我输入内容并在输入字段之外单击时，css 应该是 display:block

请指导我如何进一步进行。我是 jQuery/Javascript 的新手。谷歌搜索学习东西。

【问题讨论】：

在不查看所有相关代码、HTML CSS 的情况下，我们很难帮助您具体说明
你的选择器太长了。由于 id 在 DOM 中应该是唯一的，因此您最多可以将其缩短为 #footer-subscriber-form .form-item-mail input.email，甚至可能更少。缓存对象也会有帮助
您已经在创建一个footerEmail 变量。为什么不在后续代码中使用它而不是重复那个过长的选择器？
我会编辑并在几分钟后回来。

标签： javascript jquery css html

【解决方案1】：

你必须给var footerEmailLength = footerEmail.val().length;里面的模糊功能。

模糊功能应该是这样的：

footerEmail.blur( function() {
        var footerEmailLength = footerEmail.val().length;
        if(footerEmailLength > 0) {
            footerEmailCaptcha.css("display","block");
        }
        else if (footerEmailLength == 0) {
            footerEmailCaptcha.css("display","none");
        }

如果你使用类作为选择器然后改变footerEmail.val().length 到footerEmail[0].val().length。

运行代码

var footerEmail = $('.email');
        
        var footerEmailCaptcha = $(".captcha-hide");


footerEmail.focus( function() {
            footerEmailCaptcha.css("display","block");
        });


        footerEmail.blur( function() {
            var footerEmailLength = footerEmail[0].val().length;
            if(footerEmailLength > 0) {
                footerEmailCaptcha.css("display","block");
            }
            else if (footerEmailLength == 0) {
                footerEmailCaptcha.css("display","none");
            }
        });

.captcha-hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer">
  <input class='email'>
  <div class="captcha-hide">Testing</div>
</footer>

【讨论】：

谢谢。它就像一个魅力。现在对我来说很有意义。