javascript - 从输入获取变量并使用它来更改CSS类

我有一个id="search"输入字段。

<input id="search" type="text" />

另外，几乎没有<div>包含一些文本，例如：

<div id="textblock">Some text here</div>
<div id="textblock">Some other text here</div>
<div id="textblock">Few strokes</div>
<div id="textblock">More words</div>

如果该<div>具有用户在旅途中输入字段中键入的文本，则需要更改display:none（<div>）的样式。

例如，如果输入中的值为“ strokes”，则带有单词“ strokes”的div（或div）消失：

<div id="textblock">Some text here</div>
<div id="textblock">Some other text here</div>
<div id="textblock">More words</div>

我一直在寻找jQuery解决方案，但是我找到了代码的某些部分，但是无法将它们组合成一个工作片段。我知道我应该使用keyUp()函数，:contains()等。

最佳答案

首先，id属性必须唯一-您不能有多个具有相同ID的元素。相反，您应该使用class属性：

<div class="textblock">Some text here</div>
<div class="textblock">Some other text here</div>
<div class="textblock">Few strokes</div>
<div class="textblock">More words</div>

要进行过滤，您可以使用jQuery's :contains() selector确定哪些.textblock元素包含输入到input元素中的文本。为此，我使用了blur event handler，当input元素不再具有焦点时，它将触发：

$('#search').on('blur', function() {
    $('.textblock:contains(' + this.value + ')').hide();
});

JSFiddle demo。

如果您希望在将内容输入到input元素后立即发生这种情况，我们可以改用input事件处理程序，并将:contains()与jQuery's :not() selector组合以显示以前可能被隐藏的元素：

$('#search').on('input', function() {
    $('.textblock:contains(' + this.value + ')').hide();
    $('.textblock:not(:contains(' + this.value + '))').show();
});

JSFiddle demo。

如Dreamonic在comments中所指出的那样，如果您随后想让用户从input元素中删除内容，则需要确保我们不将空输入与.textblock内容匹配。我们可以使用trim()来做到这一点：

$('#search').on('input', function() {
    if (this.value.trim().length > 0) {
        $('.textblock:contains(' + this.value + ')').hide();
        $('.textblock:not(:contains(' + this.value + '))').show();
    }
    else
        $('.textblock').show();
});

JSFiddle demo。

关于javascript - 从输入获取变量并使用它来更改CSS类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25198709/