如何使用jquery keypress事件來隱藏匹配或啓動班級名稱

Question

首先對不起我的英語不好。我不是jQuery專家 我正在嘗試爲我的應用程序實時搜索查詢。於是我米嘗試和失敗... :(

請檢查代碼：

$(document).ready(function(){ 
 

 
$("#test").keypress(function(event) { 
 
     var $gettag = $("#test").val(); 
 
     $('p[class^="tr"]').hide(1000); \t      
 
     
 
     //$('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>

我想隱藏的P級的輸入框是什麼類型的 希望可以得到幫助，提前致謝

Answer 1

如果我很瞭解你，你需要根據輸入的文字隱藏p元素

因此，如果我輸入「try」，它應該隱藏具有「嘗試」類的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>