Question

我有一个搜索过滤器输入有效：

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

从我的侧边栏，我点击链接将表格更改为全部或测试。当我点击它时，它确实改变了表，它正在清理输入但是当'test'表出现时，我上次输入的过滤器（文本）仍然适用。

如何让它清除过滤器而不是最后一次输入文字？

<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>元素一个。

Answer 2

希望这会有所帮助。使用jQuery.toggle简化了您的功能并使用.val('')清除了输入字段。

＆＃13;

<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>

＆＃13;

Alex正在以最好的方式做到这一点，使用jQuery来附加点击处理程序而不是内联。

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

2 个答案: