Comment écrire une boîte de filtre en jquery

JQuery est une puissante bibliothèque Javascript qui peut facilement exploiter des documents HTML, facilitant ainsi le fonctionnement des documents et le traitement des événements. Dans cet article, nous apprendrons comment utiliser JQuery pour créer des boîtes de filtres, ce qui sera une compétence très pratique. Avant de commencer, vous devez avoir quelques connaissances de base de JQuery.

1. Créer une structure HTML

Tout d'abord, nous devons créer un conteneur en HTML qui contient la zone de filtre. Une structure HTML simple contenant un élément select et une liste d'éléments enfants contenant des options peut être créée en utilisant le code suivant :

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

Dans le code ci-dessus, nous avons créé un conteneur avec l'identifiant "filter-container". Il existe un élément select avec l'identifiant "filter-select" dans le conteneur, qui est utilisé pour sélectionner les conditions de filtre. Vous trouverez ci-dessous une liste non ordonnée avec l'identifiant "filter-list", qui contient certains éléments qui seront filtrés.

2. Écrire une fonction de filtre

Ensuite, nous devons écrire une fonction de filtre chargée d'afficher ou de masquer les éléments utilisés pour le filtrage en fonction des conditions de filtre sélectionnées. Cette fonctionnalité peut être réalisée en utilisant le code suivant :

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

Dans le code ci-dessus, nous avons défini une fonction appelée filtre. Cette fonction obtiendra les critères de filtre sélectionnés et affichera ou masquera les éléments en fonction des critères sélectionnés. Tout d'abord, nous utilisons un sélecteur JQuery pour obtenir la valeur de la condition de filtre et la stocker dans la variable sélectionnée. Ensuite, nous utilisons une instruction if pour vérifier si la condition est sélectionnée. S'il n'y a pas de sélection, tous les éléments seront affichés à l'aide de la méthode show de JQuery. Si une condition est sélectionnée, utilisez la méthode hide pour masquer tous les éléments, utilisez un filtre pour filtrer les éléments qui correspondent à la condition de filtre et utilisez la méthode show pour afficher ces éléments.

3. Répondre à l'interaction de l'utilisateur

Maintenant, nous devons associer la fonction de filtre à l'interaction de l'utilisateur. La fonction de filtre peut être associée à l'événement de changement dans l'élément select en utilisant le code suivant :

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

Dans le code ci-dessus, nous sélectionnons l'élément de sélection de filtre à l'aide du sélecteur JQuery et appelons la méthode de changement pour l'associer à une fonction appelée filtre. se lever. Chaque fois que l'utilisateur modifie les critères de filtre, la fonction de filtre sera appelée.

4. Code complet

Ce qui suit est un exemple de code complet pour créer et afficher une liste d'éléments avec une boîte de filtre :

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


  

    
      所有
      红色
      蓝色
      绿色
    
    

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

Ce qui précède est un tutoriel sur la façon d'utiliser JQuery pour créer une boîte de filtre, je l'espère. peut vous aider!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!