Изменение Css при изменении значения в поле ввода. JQuery

Question

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

Бегущий код

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>