如何使一個div淡出，如果jquery中的文本框爲空

Question

這裏是使用ajax使用keyup事件發送帶有類搜索器的文本框的內容。如果帶有類搜索器的文本框爲空，並且要清除id爲sub_cont的div的內容，我不想發送ajax請求。但我做不到。

任何人指出幫錯

感謝

$(".searcher").keyup(function(){ 

     if($('.searcher').val == "") 
     { 
     $('#sub_cont').fadeOut(1500); 
     } 
     else{ 

     //show the loading bar 
     showLoader(); 
     $('#sub_cont').fadeIn(1500); 
     $("#content #sub_cont").load("main/search.php?val=" + $("#search").val(), hideLoader()); 
    } 

    }); 

Answer 1

// cache commonly used selectors (but not in a global scope, please). 
var sub_cont = $("#sub_cont"); 
$(".searcher").keyup(function(){ 
    // check if the value of the input is empty or whitespace 
    // you don't need to check the length of the string or even 
    // bother checking if it is `== ""` as an empty string already 
    // evaluates to false. 
    if(!$.trim(this.value)){ 
     // stop any existing animations before fading out 
     // so we don't have ourselves a long queue of animations. 
     sub_cont.stop().fadeOut(1500); 
    } 
    else{ 
     showLoader(); 
     // **Note: While `$.fn.load` is certainly the easiest way to do it, 
     // other methods, such as $.fn.get are much more robust.** 
     // (see my comments in the body of the answer for why) 
     // Use the `data` parameter to make sure your values are encoded and 
     // concatenated properly. This also allows for much more maintainable 
     // code 
     sub_cont.load("main/search.php", {"val": this.value}, function(){ 
      hideLoader(); 
      sub_cont.stop().fadeIn(1500); 
     }); 
    } 
}); 

您應該使用的$.get代替$.fn.load這裏有幾個原因：

1. 這種「自動完成」功能都會被調用一個鍵被按下的時間。使用$ .get，您可以在發送新的ajax請求之前緩存jXHR對象和abort()。
2. 發生錯誤。 load如果出現錯誤，則不會給出逃生艙口，而get可以。
3. 通過閱讀jQuery docs on $.get自己實現這些建議，您將學到更多關於jQuery和javascript的知識。 :-p

Answer 2

我在哪裏應該

if($('.searcher').val() == "") 

Answer 3

$('.searcher').val不是現有的屬性，你想使用的功能.val()

Answer 4

用於檢查是否<input id="id" type="text" />（適用於textarea的太多，如果你改變了選擇器）是空的：

if($('input#id').val().length > 0) { 
    // is not empty 
} else { 
    // is empty 
} 

如果你想忽略簡單的空格（微調）做這樣的：

// Main check here - I just added a .trim() 
if($.trim($('input#id').val()).length > 0) { 
    // is not empty 
} else { 
    // is empty 
} 

應用在你的代碼中，我們結束了像這樣的東西：

$(".searcher").keyup(function(){ 

    if($.trim(this.value).length > 0) { 
     // is not empty 
     showLoader(); 
     $('#sub_cont').fadeIn(1500); 
     $("#content #sub_cont").load("main/search.php?val=" + $("#search").val(), hideLoader()); 
    } else { 
     // is empty 
     $('#sub_cont').fadeOut(1500); 
    } 

}); 

許多人使用if($('input#id').val().trim() == "")代替if($('input#id').val().trim().length > 0)但第二個變化是更快，因爲它只是比較不採取如睦整數小時所需時間爲比較字符串，