Question

我目前正在尝试创建一个功能正常的过滤器按钮。下面的脚本使我可以根据选择的过滤器选项来过滤列表。

我想添加一个清除按钮，以清除应用的过滤器。最好取消相应功能。

有什么办法吗？

谢谢。

$('#filterLevel').change(function(){
  var level = $(this).val();
  $("#listTeachers").find("li").hide()
      $.each($("#listTeachers").find("li"),function(){
          if($(this).data('filtertext')==level)
              $(this).show();

      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Filter Panel - County Job Filter -->
<div data-role="panel" id="schoolfilterPanel" data-display="overlay" data-position="left">
    <form id="filterJobs">
    <p class="filterHeader">FILTER</p>
    <h1 class="filterCountyHeader">Teaching Level:</h1>
        <select id="filterLevel" onchange='filterLevel()'><option disabled selected>Select level...</option><option value="Primary">Primary School</option><option value="Secondary">Secondary School</option></select><br>
    </form>
    <button id="clearButton">CLEAR</button>
    </div>
</div>

Answer 1

创建一个布尔型cancelFilter变量（可能在全局范围内），您的匿名函数每次执行时都可以查找该变量。

<script>

var cancelFilter = false;

$('#filterLevel').change(function(){

    cancelFilter = false;

    var level = $(this).val();

    $("#listTeachers").find("li").hide();

    $.each($("#listTeachers").find("li"),function(){

        if(cancelFilter)
        {

            // do whatever you need to reset the list...


            // returning false will break the $.each() loop
            return false;
        }

        if($(this).data('filtertext')==level)
        {
            $(this).show();
        }

    });

});

</script>

然后将“取消”按钮从cancelFilter更改为true

Answer 2

怎么样：

$("#clearButton").click(function(){
 $("#listTeachers").find("li").show();
});

如何取消JS函数？

2 个答案: