为什么这个jquery状态检查不起作用

Question

我试图使焦点上的颜色变为橙色以待定，然后当输入某些内容时，它变得有效，因此变为绿色。

但是，我似乎无法让它工作。

    $('#listingnewform').focus( function(){
  $('#listingnewform').css("border-bottom", "1px solid #C0AE31");
});
$('#listingnewform').blur( function(){
  if ($('#listingnewforum').length) {
    $('#listingnewform').css("border-bottom", "10px solid #fff");
  }
  else{
  };
});

任何帮助都非常感谢:)

Answer 1

试试这个：

$('#listingnewform')
    .focus(function() {
        $(this).addClass('focused');
    })
    .blur(function() {
        $(this).removeClass('focused');
    })
    .keyup(function() {
        if ( $(this).val() ) {
            $(this).addClass('valid');
        } else {
            $(this).removeClass('valid');
        };
    });

比通过 css 控制样式：

#listingnewform.focused {
    border-bottom: 1px solid #C0AE31;
}
#listingnewform.valid {
    border-bottom: 10px solid #fff;
}

查看实际效果

Answer 2

1st：use （this） 引用你的类或 id第二名：

$('#listingnewform')
.click(function() {
    // when click check input empty or not
    // if empty change border-bottom to yellow
    if($(this).val() == ""){
        $(this).css('border-bottom','3px solid yellow');
    }
})
// when user start typing change border-bottom to red
.keydown(function() {
    $(this).css('border-bottom','3px solid red');
})
// when keyup check for valid name and change border-bottom to green
.keyup(function() {
    if($(this).val() == "admin"){
    $(this).css('border-bottom','3px solid green');
    }
})
// when focusout return border-bottom to input border
.focusout(function() {
    $(this).css('border','1px solid black'); 
});

这是演示