집 > 기사 > 웹 프론트엔드 > jQuery 다중 조건 필터링을 구현하는 방법

jQuery 다중 조건 필터링을 구현하는 방법

不言원래의: 2018-06-25 11:53:332444검색

이 글은 다중 조건 필터링 효과를 구현하기 위한 jquery를 주로 소개합니다. 도움이 필요한 모든 사람이 참고할 수 있습니다.

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

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

콘텐츠를 정리한 후 페이지 콘텐츠에 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(); 
    } 
  }); 
});

실제 적용시에는 멋진 선택 조건을 구현하기 위해 백엔드 프로그램을 결합해야 합니다. 관심 있는 학생들은 시도해 볼 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

jQuery 다중 조건 필터링을 구현하는 방법

관련 기사