javascript - 单击链接时如何清除输入元素？

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('');
});

编辑:Here's a JSFiddle这可能会有所帮助。这里有两个点击处理程序，每个 <a> 一个。单击元素。