So implementieren Sie die jQuery-Mehrbedingungsfilterung

So implementieren Sie die jQuery-Mehrbedingungsfilterung_jquery

WBOY

Freigeben： 2016-05-16 15:33:43

Original

1374 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierung von Filtereffekten mit mehreren Bedingungen mit jquery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Wenn wir Waren auf der E-Commerce-Plattform kaufen, filtern und fragen wir auf der Produktlistenseite nach Marke, Stil, Preisspanne und anderen Bedingungen ab. Wenn wir auf eine Bedingung klicken, werden die vom Benutzer ausgewählten Bedingungen angezeigt auf der Seite und die entsprechenden passenden Bedingungen werden auf der Seite angezeigt. Deshalb verwenden wir heute jQuery, um diesen Front-End-Effekt zu erzielen.
Vorgangsrendering:

HTML
Zuerst klassifizieren wir die Abfragebedingungen und ordnen den Bedingungscontainer li.select-list und den ausgewählten Bedingungscontainer div.select-result auf der Seite an.

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

Nach dem Login kopieren

Fügen Sie nach dem Anordnen des Inhalts CSS-Stile zum Seiteninhalt hinzu und laden Sie zugehörige JS.

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

Nach dem Login kopieren

jQuery
Wenn der Benutzer auf eine Bedingung klickt, wird der aktuell ausgewählte Zustand markiert, die angrenzende Bedingung wird abgewählt und der Inhalt des ausgewählten Bedingungscontainers wird aktualisiert. Bitte beachten Sie den 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(); 
    } 
  }); 
});

Nach dem Login kopieren

In der tatsächlichen Anwendung müssen wir das Back-End-Programm kombinieren, um die guten Auswahlbedingungen zu realisieren, und der Inhalt der Seitenantwort wird sich auch ändern. Interessierte Studenten können es ausprobieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Hier erfahren Sie, wie Sie die Filterfunktion mit mehreren Bedingungen in js implementieren.