如果jquery中的文本框为空，如何使div淡出

这里我通过ajax使用keyup事件通过类搜索器发送文本框的内容。如果带有类searcher的文本框为空，并且清除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());
    }

    });

应该是

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

$（'.searcher'）.val

不是现有属性，您要使用函数

.val（）

检查

（如果更改选择器，也适用于textarea）是否为空：

if($('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）

，但第二种变体速度更快，因为它只与整数比较，而与字符串相比所花的时间更少

// 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

，原因如下：

每次按键时都会调用此“自动完成”功能。使用$.get，您可以缓存jXHR对象，并在发送新的ajax请求之前，

abort（）

错误时有发生<代码>加载在出现错误时不会为您提供转义图案填充，而

获取

则会

通过阅读这些建议，您将学到更多关于jQuery和javascript的知识-p

---

你能添加你的HTML吗？类

searcher

还有多少其他元素？对不起，你真的很难理解。我假设您想要

$（“选择器”）.fadeOut（）

当某个

$（“输入#选择器”）

为空/值为==“”？请您将David的答案标记为正确答案好吗？在

val

和

（）

之间有一个额外的句点（

）。哇，请不要这样做。现代浏览器已经有了

String.trim

。还有jQuery，你说得对，我的trim代码写得又快又脏。我应该检查是否已经定义了trim（）。但是我不喜欢使用jQuery，因为它是不必要的。我会解决这个问题。为什么您不想使用jQuery提供的经过严格检查和彻底测试的函数，而不是您自己的坏版本？另外，您建议

$（this）.val（）

当

此.value

在（可能）每个浏览器中都能使用，并且比jQuery对应的浏览器快得多。David，您给了我一个教训。谢谢；）请用大卫的答案。因为几个原因，它比较好。

// 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);
        });
    }
});