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，原因如下：

每按一次键，都会调用此“自动完成”功能。使用$ .get可以在发送新的ajax请求之前缓存jXHR对象和abort()。
错误发生。如果load发生错误，则get不会为您提供逃生舱口。
通过阅读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)，但第二种变体更快，因为它只是比较整数而不需要花费与字符串比较的时间，

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

4 个答案: