單擊鏈接時如何清除輸入元素？

Question

我有一個有效的搜索過濾器輸入：

<form id="filter-form" action="">
      <p>Search table: <input name="filter"  id="filter" value="" maxlength="30" size="30" type="text"></p>
</form>

我從側邊欄中單擊鏈接，將表更改為全部或測試。 當我單擊它時，它的確會更改表格並清除輸入內容，但是當“測試”表格出現時，上一次我輸入的過濾器（文本）仍然適用。

如何清除篩選器而沒有上次輸入文字？

<ul>
<li><a id="all" href="#1"   onclick="changeClass('all')">All</a></li>
<li><a id="test" href="#2"  onclick="changeClass('test');" >2</a></li>

</ul>

<script type="text/javascript">
    function changeClass(x){
        if(x=="all"){           
            $("#t01").hide();
            $("#t02").show();

document.getElementById("filter").value="";         
        }
        else if(x == "corporate"){          
            $("#t01").show();
            $("#t02").hide();
            document.getElementById("filter").value="";

    }
</script>

Answer 1

如果我的問題正確，則可以使用點擊處理程序：

$("#all, #test").on('click', function() {
  $("#filter").val('');
});

編輯： 這是一個JSFiddle ，可能會有所幫助。 這里有兩個單擊處理程序，每個單擊的<a>元素一個。

Answer 2

希望這會有所幫助。 使用jQuery.toggle稍微簡化了函數，並使用.val('')清除了輸入字段。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="filter-form" action=""> <p>Search table: <input name="filter" id="filter" value="" maxlength="30" size="30" type="text"></p> </form> <ul> <li><a id="all" href="#1" onclick="changeClass('all')">All</a></li> <li><a id="test" href="#2" onclick="changeClass('test');">2</a></li> </ul> <script> function changeClass(x){ $('#t01').toggle(x != 'all'); $('#t02').toggle(x == 'all'); $('#filter').val(''); } </script> 

Alex使用jQuery附加點擊處理程序而不是內聯，這是最好的方法。