0

我又回来了另一个 jQuery 问题，哇！这就是我正在尝试做的事情，我有文本字段，如果用户没有输入任何内容，我希望它的背景变为红色，或者如果输入内容则变为绿色。这两项检查都发生在“blur”上，我使用的是“.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 语句有问题，对吗？

4

2 回答 2

4

您的“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();
于 2012-04-29T12:28:39.213 回答
1 
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();        
});

小提琴在这里！

于 2012-04-29T12:49:56.213 回答