Question

好的，这很难在标题中描述。我所拥有的是输入字段和三个段落[将它们称为“Ps”]

<p>ABCD</p>
<p>CDEF</p>
<p>XYZ</p>

现在，当在输入字段中按下按钮时，不包含搜索字符串的段落将被过滤掉hide()。完成以下事项：

$("input").keyup(function(){
    var x = $(this).val();
    $("p:not(:contains('" + x + "'))").hide();
});

当按下退格键或删除键时，不再包含搜索字符串的Ps会再次显示show()，如下所示：

$("input").keydown(function(){
        var x = $(this).val();
        var key = event.keyCode || event.charCode;

        if( key == 8 || key == 46 ){
            $("p:not(:contains('" + x + "'))").show();
        }
});

现在这会导致一种奇怪的行为。我真的很难解释这个.. 为了得到我正在谈论的内容，请按照fiddle result

中的这些步骤操作

点击输入字段
输入'abc'[输入'a'后立即隐藏最后两个P]
输入'x'[所以输入现在为'abcx'且第一个P已隐藏]
按退格键并注意关闭注意[所有Ps都会暂时显示，之后只有第一个按预期保留]

这是full JSFiddle

所以，我想知道的是，无论如何都没有显示那个瞬间显示的所有Ps，并且只有在按下退格键时显示第一个P.

Answer 1

你可以像这样做

$("input").keyup(function(){
        var x = $(this).val();
        $("p:not(:contains('" + x + "'))").hide();
        $("p:contains('" + x + "')").show();
});

Fiddle

Answer 2

出现这种行为的原因是因为你有keydown

$("p:not(:contains('" + x + "'))").show();

对于每个不包含我的文字的p，显示。

然后在密钥上，对于相同的密钥，你有

$("p:not(:contains('" + x + "'))").hide();

对于每个不包含我的文字的p，隐藏。

我相信

$("p:not(:contains('" + x + "'))").show();

应该是

$("p:contains('" + x + "')").show();

Void的答案对于整合代码是正确的，也可以解决您的问题，但这解释了您发布的代码中的问题所在。

过滤掉不包含搜索字符串的元素[有解决方案，寻求改进]

2 个答案: