如何使用 jquery 按键事件隐藏匹配或开始 class 名称

Question

首先抱歉我的英语不好。我不是 jQuery 专家我正在为我的应用尝试实时搜索查询。所以我尝试并失败了... :(

请检查代码：

$(document).ready(function(){

$( "#test" ).keypress(function( event ) {
        var $gettag = $("#test").val();
        $('p[class^="tr"]').hide(1000);                      
        
        //$('p[class^="tr"]').hide(1000);  its works fine
    });
});

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

<p>This is a paragraph with little content.</p>
<p class="try">This is another small paragraph.</p>
<p class="tiy">iiiiiiiiiiiiiiiThis is another small paragraph.</p>

我想隐藏输入框上pwhat类型的class。希望能得到帮助。提前致谢。

Answer 1

如果我理解你的意思，你需要根据输入文本隐藏 p 元素。

所以，如果我键入 "try"，它应该隐藏具有 "try" class.

的 p 标签

看看下面的代码是否满足您的要求。

$(function() {
  $("#test").on('keyup', function(event) {
    var value = $("#test").val();

    if (value.length > 1) {
    debugger;
      var $element = $('p[class*="' + value + '"]');

      if ($element.length == 0) {
        $('p').show(1000);
      } else {
        $element.hide(1000);
      }
    } else {
      $('p').show(1000);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

<p>This is a paragraph with little content.</p>
<p class="try test">This is another small paragraph.</p>
<p class="tiy">iiiiiiiiiiiiiiiThis is another small paragraph.</p>

如何使用 jquery 按键事件隐藏匹配或开始 class 名称

How to use jquery keypress event to hide match or starting class name

javascript

jquery

keypress

jquery-selectors