Question

＆＃13;

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");
            }
        });

＆＃13;

.captcha-hide {
  display:none;
}

＆＃13;

<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>

＆＃13;

当我在文本（输入）字段中输入内容时，我想确保onblur有效。

首先，如果模糊函数内的条件不起作用，因为它将值取为＆＃39; 0＆＃39;这将是最初的。当我输入内容并在输入字段外单击时，应显示css：block

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

Answer 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 。

正在运行的代码

＆＃13;

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");
            }
        });

＆＃13;

.captcha-hide {
  display:none;
}

＆＃13;

<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>

＆＃13;

Css更改输入字段中的值更改。 jQuery的

1 个答案: