So implementieren Sie die jQuery-Filterung mit mehreren Bedingungen-js-Tutorial-php.cn

So implementieren Sie die jQuery-Filterung mit mehreren Bedingungen

不言

Freigeben： 2018-06-25 11:53:33

Original

2526 Leute haben es durchsucht

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>

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 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(); 
    } 
  }); 
});

Nach dem Login kopieren

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!