jquery css更改导致typeError为null

Question

嘿，我想知道为什么我使用以下代码收到此错误：

javascript：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 <script src="http://max.jotfor.ms/min/g=jotform?3.0.3359" type="text/javascript"></script>

 function checkInput() {
if ($("#input_3") === null) {
    $('#error1').css('display', 'block');
        $('#error1').css('visibility', 'visible');
}
 ....

CSS：

 .ErrorBlock1 {
    display: none;
    visibility: hidden;     
    background-color:#F00;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
 }

HTML：

 <div id="cid_3" class="form-input-wide">
    <input name="q3_firstName3" type="text" class="form-textbox validate[required, Alphabetic]" id="input_3" size="25" style="width: 265px; height: 25px; background: transparent url(textfield.png) no-repeat center center; border: none;" onBlur="checkInput();" />
 <div class="ErrorBlock1" id="error1">First Name Req.</div>
 </div>

运行时出现此错误：

Timestamp: 9/17/2012 9:10:15 AM
Error: TypeError: $("#error1") is null

为什么我会得到这个？？？

Answer 1

$('#input_3') 永远不会返回 null。它总是一个 jQuery 对象。

用$('#input_3').length != 0检查它的存在。

Answer 2

你可以同时使用 display 和 visibility ：

jsBin demo

CSS：

.ErrorBlock1 {
    display: none; 
    visibility: hidden;
    background-color:#F00;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
 }

jQuery:

function checkInput() {
  if ($("#input_3").val().length) {
      $('#error1').show().css({visibility:'visible'});
  }else{
      $('#error1').hide().css({visibility:'hidden'});
  }
}