选择框 - 显示/不显示

Question

我有一个页面，允许用户补充一到三个选择框。

第一个选择框在加载时显示在页面上，然后用户可以点击＆＃34;添加过滤器2/3/4＆＃34;

见下面的代码：

<div id="filter2"><a href="#">Add Filter 2</a></div>           
    <div id="filtertwo">           

      <label class="">Filter 2</label>
      <select class="full-width" data-placeholder="Select Filter" name="filter2" data-init-plugin="select2">

      <option value="test">Test</option>
      <option value="test1">Test1</option>
      </select>   

    <script>
        $(document).ready(
        function() {
            $("#filter2").click(function() {
                $("#filtertwo").toggle();
            });
        });

    </script>

    <style>
         #filtertwo {
        display: none;
    }
    </style>

我的每个选择框的编码都是相同的。我想只显示文字＆＃34;添加新过滤器＆＃34;只有一次，这可能吗？

我附上了截图，以便您查看我当前的页面：

Answer 1

<div id="filter2"> <a id="filterLink" href="#"> Add New Filter </a> </div>

<script>
     $(document).ready(function(){
          $("#filter2").click(function() {
              $("#filtertwo").toggle();
              $("filterLink").hide();
              $("filter2").innerHTML = "<a id='filterLink' href='#'> Add Filter 2 </a>";
          });
     });
</script>

现在重复代码innerHTML您想要该链接的次数。

Answer 2

如果我理解你的话。请考虑以下代码段：

$(document).ready(
    function() {
        $("#filter1,#filter2, #filter3").click(function() {
            $('.filter').hide();
            $(this).next('.filter').toggle();
        });
    });

DEMO

如果您只想显示一个过滤器链接：

$(document).ready(
    function() {
        $(".filter-link").click(function() {
            $(".filter-link").hide();
            $(".filter-link").not(this).show();
            $('.filter').hide();
            $(this).next('.filter').toggle();
        });
    });

Updated DEMO