jquery怎么写筛选框-前端问答-PHP中文网

首页

web前端

前端问答

jquery怎么写筛选框

PHPz

Apr 17, 2023 am 09:50 AM

JQuery是一个强大的Javascript库，可以方便地操作HTML文档，使的文档操作和事件处理更加容易。在本文中，我们将学习如何使用JQuery来创建筛选框，这将是一个非常实用的技能。在开始之前，您应该具备一定的JQuery基础知识。

创建HTML结构

首先，我们需要在HTML中创建一个包含筛选框的容器。可以使用以下代码创建一个简单的HTML结构，其中包含一个select元素和一个包含选项的子元素列表：

<div id="filter-container">
  <select id="filter-select">
    <option value="">所有</option>
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
    <option value="green">绿色</option>
  </select>
  <ul id="filter-list">
    <li class="red">红色物品</li>
    <li class="blue">蓝色物品</li>
    <li class="green">绿色物品</li>
  </ul>
</div>

登录后复制

在上面的代码中，我们创建了一个包含id为“filter-container”的容器。容器中有一个id为“filter-select”的select元素，用于选择筛选条件。下面是一个id为“filter-list”的无序列表，其中包含了一些物品，这些物品将被筛选。

编写筛选函数

接下来，我们需要编写一个筛选函数，该函数负责根据选定的筛选条件显示或隐藏用于筛选的元素。可以使用以下代码实现此功能：

function filter() {
  var selected = $("#filter-select").val(); // 获取选择的筛选条件
  if(selected == "") { // 如果没有选择
    $("#filter-list li").show(); // 显示所有元素
  } else { // 如果选择了条件
    $("#filter-list li").hide(); // 隐藏所有元素
    $("." + selected).show(); // 显示与条件匹配的元素
  }
}

登录后复制

在上面的代码中，我们定义了一个名为filter的函数。该函数将获取选定的筛选条件，并根据选定的条件显示或隐藏元素。首先，我们使用JQuery选择器获取筛选条件的值，并将其存储在selected变量中。接下来，我们使用if语句检查是否选择了条件。如果没有选择，则将所有元素显示出来，使用JQuery的show方法。如果选择了条件，则使用hide方法将所有元素隐藏起来，并使用筛选器筛选与筛选条件匹配的元素，并使用show方法将这些元素显示出来。

响应用户交互

现在，我们需要将筛选函数与用户交互关联。可以使用以下代码将筛选函数与选择元素中的change事件相关联：

$("#filter-select").change(filter); // 注册change事件并调用filter函数

登录后复制

在上面的代码中，我们使用JQuery选择器选择筛选条件select元素，并调用change方法将其与名为filter的函数关联起来。每当用户更改筛选条件时，将调用filter函数。

完整代码

下面是完整的代码示例，用于创建和呈现带有筛选框的元素列表：




  
  JQuery筛选框
  
  <script>
    function filter() {
      var selected = $("#filter-select").val(); // 获取选择的筛选条件
      if(selected == "") { // 如果没有选择
        $("#filter-list li").show(); // 显示所有元素
      } else { // 如果选择了条件
        $("#filter-list li").hide(); // 隐藏所有元素
        $("." + selected).show(); // 显示与条件匹配的元素
      }
    }
    
    $(function() {
      $(&quot;#filter-select&quot;).change(filter); // 注册change事件并调用filter函数
    });
  </script>


  
    
    
      红色物品
      蓝色物品
      绿色物品