Comment implémenter le filtrage multi-conditions jQuery_jquery

L'exemple de cet article décrit l'implémentation d'effets de filtrage multi-conditions avec jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Lorsque nous achetons des produits sur la plateforme de commerce électronique, nous filtrons et recherchons en fonction de la marque, du style, de la gamme de prix et d'autres conditions sur la page de liste de produits. Lorsque nous cliquons sur une condition, l'ensemble des conditions sélectionnées par l'utilisateur sera affiché. sur la page, et les conditions de correspondance correspondantes seront affichées sur la page. Les informations conditionnelles sur le produit sont affichées. Nous utilisons donc aujourd’hui jQuery pour obtenir cet effet frontal.
Rendu d'opération :

HTML
Tout d’abord, nous classons les conditions de requête et organisons le conteneur de conditions li.select-list et le conteneur de conditions sélectionné div.select-result sur la page.

<ul class="select">  
    <li class="select-list">  
      <dl id="select1">  
        <dt>上装：</dt>  
        <dd class="select-all selected"><a href="#">全部</a></dd>  
        <dd><a href="#">针织衫</a></dd>  
        <dd><a href="#">毛呢外套</a></dd>  
        <dd><a href="#">T恤</a></dd>  
        <dd><a href="#">羽绒服</a></dd>  
        <dd><a href="#">棉衣</a></dd>  
        <dd><a href="#">卫衣</a></dd>  
        <dd><a href="#">风衣</a></dd>  
      </dl>  
    </li>  
    <li class="select-list">  
      <dl id="select2">  
        <dt>裤装：</dt>  
        <dd class="select-all selected"><a href="#">全部</a></dd>  
        <dd><a href="#">牛仔裤</a></dd>  
        <dd><a href="#">小脚/铅笔裤</a></dd>  
        <dd><a href="#">休闲裤</a></dd>  
        <dd><a href="#">打底裤</a></dd>  
        <dd><a href="#">哈伦裤</a></dd>  
      </dl>  
    </li>  
    <li class="select-result">  
      <dl>  
        <dt>已选条件：</dt>  
        <dd class="select-no">暂时没有选择过滤条件</dd>  
      </dl>  
    </li>  
  </ul>  

Après avoir organisé le contenu, ajoutez des styles CSS au contenu de la page et chargez les js associés.

<link rel="stylesheet" type="text/css" href="css/style.css">  
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/script.js"></script>

jQuery
Lorsque l'utilisateur clique sur une condition, l'état actuellement sélectionné est marqué, la condition adjacente est désélectionnée et le contenu du conteneur de conditions sélectionné est mis à jour. Veuillez consulter le code :
.

$(document).ready(function() { 
  $("#select1 dd").click(function() { 
    $(this).addClass("selected").siblings().removeClass("selected"); 
    if ($(this).hasClass("select-all")) { 
      $("#selectA").remove(); 
    } else { 
      var copyThisA = $(this).clone(); 
      if ($("#selectA").length > 0) { 
        $("#selectA a").html($(this).text()); 
      } else { 
        $(".select-result dl").append(copyThisA.attr("id", "selectA")); 
      } 
    } 
  }); 
  $("#select2 dd").click(function() { 
    $(this).addClass("selected").siblings().removeClass("selected"); 
    if ($(this).hasClass("select-all")) { 
      $("#selectB").remove(); 
    } else { 
      var copyThisB = $(this).clone(); 
      if ($("#selectB").length > 0) { 
        $("#selectB a").html($(this).text()); 
      } else { 
        $(".select-result dl").append(copyThisB.attr("id", "selectB")); 
      } 
    } 
  }); 
  $("#selectA").live("click", 
  function() { 
    $(this).remove(); 
    $("#select1 .select-all").addClass("selected").siblings().removeClass("selected"); 
  }); 
  $("#selectB").live("click", 
  function() { 
    $(this).remove(); 
    $("#select2 .select-all").addClass("selected").siblings().removeClass("selected"); 
  }); 
  $(".select dd").live("click", 
  function() { 
    if ($(".select-result dd").length > 1) { 
      $(".select-no").hide(); 
    } else { 
      $(".select-no").show(); 
    } 
  }); 
});  

Dans l'application réelle, nous devons combiner le programme back-end pour réaliser les belles conditions de sélection, et le contenu de la réponse de la page changera également. Les étudiants intéressés peuvent l'essayer.

Ce qui précède représente l'intégralité du contenu de cet article. Il vous explique comment implémenter la fonction de filtrage multi-conditions dans js. J'espère que cela sera utile à votre étude.