So implementieren Sie die jQuery-Filterung mit mehreren Bedingungen

Dieser Artikel stellt hauptsächlich JQuery vor, um Filtereffekte mit mehreren Bedingungen zu implementieren. Es wird jedem empfohlen, der sich darauf bezieht.

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

HTML
Zuerst klassifizieren wir die Abfragebedingungen und ordnen den Bedingungscontainer li.select- auf der Seite an . Liste und ausgewählter Bedingungscontainer 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>

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>

jQuery
Wenn der Benutzer auf eine beliebige Bedingung klickt, markiert er den aktuell ausgewählten Status und die angrenzende Bedingung ist Deaktivieren Sie die Option und aktualisieren Sie den Inhalt des ausgewählten Bedingungscontainers. 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(); 
    } 
  }); 
});

In der tatsächlichen Anwendung müssen wir die Rückseite kombinieren -Endprogramm zur Umsetzung der attraktiven Auswahlbedingungen Zu diesem Zeitpunkt wird sich auch der Inhalt der Seitenantwort ändern. Interessierte Schüler können es ausprobieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse der jQuery-Datei-Upload-Steuerung Uploadify

Über Jquery zTree Tree Control asynchroner Ladevorgang

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die jQuery-Filterung mit mehreren Bedingungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!