Comment implémenter le filtrage multi-conditions jQuery-js tutoriel-php.cn

Comment implémenter le filtrage multi-conditions jQuery

不言

Libérer： 2018-06-25 11:53:33

original

2527 Les gens l'ont consulté

Cet article présente principalement jquery pour implémenter des effets de filtrage multi-conditions. Il est recommandé à tous les amis dans le besoin de s'y référer.

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. Lorsqu'on clique sur une certaine condition, l'ensemble est défini. des conditions sélectionnées par l'utilisateur seront affichées sur la page et afficheront les informations sur le produit correspondant qui répondent aux conditions. Nous utilisons donc aujourd’hui jQuery pour obtenir cet effet frontal.
Rendu en cours d'exécution :

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

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

Copier après la connexion

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>

Copier après la connexion

jQuery
Lorsque l'utilisateur clique sur une condition, l'état actuellement sélectionné est marqué et le les conditions adjacentes sont annulées. Sélectionnez l'état et mettez à jour le contenu du conteneur de conditions sélectionné, 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(); 
    } 
  }); 
});

Copier après la connexion

Dans l'application réelle. , nous devons combiner le programme back-end. Lorsque les bonnes conditions de sélection seront mises en œuvre, le contenu de la réponse de la page changera également. Les étudiants intéressés pourront l'essayer.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse du contrôle de téléchargement de fichiers jQuery Uploadify

À propos de l'opération de chargement asynchrone du contrôle d'arborescence Jquery zTree

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!