jQuery 다중 조건 filtering_jquery를 구현하는 방법

이 기사의 예에서는 jquery를 사용한 다중 조건 필터링 효과 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
우리는 전자상거래 플랫폼에서 상품을 구매할 때 상품 목록 페이지에서 브랜드, 스타일, 가격 범위 및 기타 조건을 기준으로 필터링하고 쿼리하며, 조건을 클릭하면 사용자가 선택한 조건 집합이 표시됩니다. 페이지에 해당 일치 조건이 표시됩니다. 조건부 제품 정보가 표시됩니다. 그래서 오늘 우리는 jQuery를 사용하여 이러한 프런트 엔드 효과를 얻습니다.
작업 렌더링:

HTML
먼저 쿼리 조건을 분류하고 조건 컨테이너 li.select-list와 선택된 조건 컨테이너 div.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>  

콘텐츠를 정리한 후 페이지 콘텐츠에 CSS 스타일을 추가하고 관련 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
사용자가 임의의 조건을 클릭하면 현재 선택한 상태가 표시되고 인접 조건이 선택 해제되며 선택한 조건 컨테이너의 내용이 업데이트됩니다.
코드를 참조하세요.

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

실제 적용시에는 백엔드 프로그램을 결합하여 멋진 선택 조건을 구현해야 하며, 페이지 응답 내용도 변경됩니다.

위 내용은 이 글의 전체 내용입니다. js에서 다중 조건 필터링 기능을 구현하는 방법에 대해 설명합니다. 여러분의 연구에 도움이 되기를 바랍니다.