Question

我回来了另一个jQuery问题，喔！这是我正在尝试做的事情，我有文本字段，如果用户没有输入任何内容，我希望它的背景变为红色，或者如果输入了某些内容，则变为绿色。两个检查都发生在“模糊”，我正在使用“.animate（）”。改变背景颜色。（我有jQuery-Color让我动画颜色）。这是我的剧本：

<head>
    <script type="text/javascript" src="assets/javascript/jQuery.js"></script>
    <script type="text/javascript" src="assets/javascript/jQuery-color.js"></script>
    <script>
    var jQ=jQuery.noConflict();

    var fullNameValue=jQ(".fullName").attr("value");

    jQ(document).ready(function(){
        jQ(".fullName").blur(function(){
            if(fullNameValue==null || fullNameValue==""){
                jQ(".fullName").animate({
                    backgroundColor: "#AF383C",
                    color: "#FFFFFF"
                });
            }
            else{
                jQ(".fullName").animate({
                    backgroundColor: "#78BB6C",
                    color: "#000000"
                });
            }
        });
    });
    </script>
</head>

目前，在模糊时，即使在文本字段中输入了某些内容，文本字段也会变为红色，这可能意味着我的if语句出错了，是吗？

Answer 1

您的“fullNameValue”变量是在<input>字段本身尚未在DOM 中时建立的。那个陈述应该是里面你的“模糊”处理程序。

jQ(document).ready(function(){
    jQ(".fullName").blur(function(){
        var fullNameValue=jQ(".fullName").attr("value");
        if(fullNameValue==null || fullNameValue==""){
            jQ(".fullName").animate({
                backgroundColor: "#AF383C",
                color: "#FFFFFF"
            });
        }
        else{
            jQ(".fullName").animate({
                backgroundColor: "#78BB6C",
                color: "#000000"
            });
        }
    });
});

如果你在实际发生“模糊”时检查了值，那么你所做的只是有意义的。

进一步澄清：

var fullNameValue=jQ(".fullName").attr("value");

该语句将“fullNameValue”设置为该字段的值。如果该值稍后更改，则变量将不更新;它仍然是执行该语句时的值的副本。

最后，最好使用.val()来获取表单字段的值：

var fullNameValue = jQ(".fullName").val();

Answer 2

function inputBorder() {
    var i = $('input[type="text"]');

    i.blur(function() {
        i.removeClass('red green');
        if(i.val() == "") {
            i.addClass('red');   
        } else {
            i.addClass('green');                
        }

    });
}

$(document).ready(function() {
    inputBorder();        
});

小提琴Here！

使用jQuery和“if / else”来制作动画

2 个答案: