javascript - jQuery .hide()，然后是 .show() 基于文本输入

Question

使用我找到的 jQuery 过滤器示例。这是我的活生生的例子。这是CodePen ，（如果您不喜欢 CodePen ，也是Fiddle ）。

在输入中输入内容后，框会重新对齐并且数字消失。但是，当您删除输入的文本时，除非您刷新页面，否则数字不会重新出现。我尝试弄乱下面的代码，但没有任何运气。谢谢你的帮助！

    $('#sortable').change(
function(){
if ($(this).val().length) {
    $('#number').hide();
}
else {
    $('#number').show();
}

});

Answer 1

这是更新的js ...

结帐演示小提琴

(function ($) {
    jQuery.expr[':'].Contains = function (a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    function listFilter(header, list) {
        var form = $("<form>").attr({
            "class": "filterform",
                "action": "#"
        }),
            input = $("<input>").attr({
                "class": "filterinput",
                    "type": "text",
            });
        $(form).append(input).appendTo(header);
        $(input).change(function () {
            var filter = $(this).val();
            if (filter) {
                $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
                $(list).find("a:Contains(" + filter + ")").parent().slideDown();
            } else {
                $(list).find("li").slideDown();
            }
            return false;
        }).keyup(function () {
            $(this).change();
            if ($(this).val().length) {
                $('.number').hide();
            } else {
                $('.number').show();
            }

        });
    }
    $(function () {
        listFilter($("#header"), $("#sortable"));

    });
}(jQuery));

Answer 2

试试这个：- http://jsfiddle.net/aidioo7/nYYBU/10/

JS：-

(function ($) {
    jQuery.expr[':'].Contains = function (a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    function listFilter(header, list) {
        var form = $("<form>").attr({
            "class": "filterform",
                "action": "#"
        }),
            input = $("<input>").attr({
                "class": "filterinput",
                    "type": "text",
            });
        $(form).append(input).appendTo(header);
        $(input).change(function () {
            var list = $("#sortable");
            var filter = $(this).val();
            console.log(filter.length);
            if (filter.length > 0) {
                $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
                $(".number").hide();
                $(".numberstwo").hide();
            } else {
                console.log($(".number"));
                $(".number").show();
                $(".numberstwo").show();
                $(list).find("a").parent().slideDown();
            }
            return false;
        }).keyup(function () {
            $(this).change();

        });
    }
    $(function () {
        listFilter($("#header"), $("#sortable"));

    });
}(jQuery));

Answer 3

要检查输入的文本，我通常使用 keyup。当用户键入内容时不会触发更改，而是在他键入并退出框时触发。

Answer 4

$('#sortable').blur(function(){
var len = $(this).val().length;
if (len) {
    $('#number').hide();
}
else {
    $('#number').show();
}