单击链接时显示/隐藏开关

Question

问题是，我创建了一个ASC / DESC过滤器，但我只会显示一个过滤器，当我点击链接时，另一个（DESC）显示，另一个是隐藏和保留。

以下是过滤器的代码：

 <form id="sort-direction" class="sort-control hidden" method="get" action="">
<div style="margin:0;padding:0;display:none">
<input type="hidden" value="" name="utf8">
</div>
<button id="sort-direction" class="post-link" type="submit">Sort Ascending</button>
<input id="order" type="hidden" value="asc" name="order">

</form>
<a class="sort-control  sort-direction-asc" href="?utf8=&order=asc#" data-original-title="Sort Ascending">Sort Ascending</a>



<form id="sort-direction" class="sort-control hidden" method="get" action="#">
<div style="margin:0;padding:0;display:none">
<input type="hidden" value="#" name="utf8">
</div>
<button id="sort-direction" class="post-link" type="submit">Sort Descending</button>
<input id="order" type="hidden" value="desc" name="order">
</form>
<a class="sort-control sort-direction-desc" href="?utf8=&order=desc#" data-original-title="Sort Descending">Sort Descending</a>

这应该是Java代码，只显示一个元素，然后单击它，另一个显示....但它不起作用。

  $(".sort_select").change(function () { this.form.submit(); });

$("#sort-direction").displayButtonAsLink({ 
 "class": "sort-control sort-direction-asc",
 "title": "Sort Ascending"
 });
 $(".sort-direction-asc").twipsy({ placement: "below" });

  $(".sort_select").change(function () { this.form.submit(); });

$("#sort-direction").displayButtonAsLink({ 
 "class": "sort-control sort-direction-desc",
 "title": "Sort Descending"
 });
 $(".sort-direction-desc").twipsy({ placement: "below" });