Jquery에서 필터 상자를 작성하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Jquery에서 필터 상자를 작성하는 방법

PHPz

Apr 17, 2023 am 09:50 AM

JQuery는 HTML 문서를 쉽게 조작할 수 있는 강력한 Javascript 라이브러리로, 문서 조작 및 이벤트 처리를 더 쉽게 만듭니다. 이 기사에서는 JQuery를 사용하여 필터 상자를 만드는 방법을 배우게 되는데, 이는 매우 실용적인 기술이 될 것입니다. 시작하기 전에 JQuery에 대한 기본 지식이 있어야 합니다.

HTML 구조 만들기

먼저 필터 상자가 포함된 HTML 컨테이너를 만들어야 합니다. 선택 요소가 포함된 간단한 HTML 구조와 옵션이 포함된 하위 요소 목록은 다음 코드를 사용하여 생성할 수 있습니다.

<div id="filter-container">
  <select id="filter-select">
    <option value="">所有</option>
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
    <option value="green">绿色</option>
  </select>
  <ul id="filter-list">
    <li class="red">红色物品</li>
    <li class="blue">蓝色物品</li>
    <li class="green">绿色物品</li>
  </ul>
</div>

로그인 후 복사

위 코드에서는 ID가 "filter-container"인 컨테이너를 생성합니다. 컨테이너에는 필터 조건을 선택하는 데 사용되는 ID가 "filter-select"인 선택 요소가 있습니다. 다음은 필터링될 일부 항목을 포함하는 ID가 "filter-list"인 순서가 지정되지 않은 목록입니다.

필터 함수 작성

다음으로, 선택한 필터 기준에 따라 필터링에 사용되는 요소를 표시하거나 숨기는 필터 함수를 작성해야 합니다. 이 기능은 다음 코드를 사용하여 구현할 수 있습니다.

function filter() {
  var selected = $("#filter-select").val(); // 获取选择的筛选条件
  if(selected == "") { // 如果没有选择
    $("#filter-list li").show(); // 显示所有元素
  } else { // 如果选择了条件
    $("#filter-list li").hide(); // 隐藏所有元素
    $("." + selected).show(); // 显示与条件匹配的元素
  }
}

로그인 후 복사

위 코드에서는 필터라는 함수를 정의했습니다. 이 기능은 선택한 필터 기준을 가져오고 선택한 기준에 따라 요소를 표시하거나 숨깁니다. 먼저 JQuery 선택기를 사용하여 필터 조건의 값을 가져와 선택한 변수에 저장합니다. 다음으로 if 문을 사용하여 조건이 선택되었는지 확인합니다. 선택 항목이 없으면 JQuery의 show 메소드를 사용하여 모든 요소가 표시됩니다. 조건이 선택된 경우 hide 메소드를 사용하여 모든 요소를 숨기고, 필터를 사용하여 필터 조건과 일치하는 요소를 필터링하고, show 메소드를 사용하여 해당 요소를 표시합니다.

사용자 상호작용에 응답

이제 필터 기능을 사용자 상호작용과 연관시켜야 합니다. 필터 함수는 다음 코드를 사용하여 select 요소의 변경 이벤트와 연결할 수 있습니다.

$("#filter-select").change(filter); // 注册change事件并调用filter函数

로그인 후 복사

위 코드에서는 JQuery 선택기를 사용하여 필터 선택 요소를 선택하고 변경 메서드를 호출하여 이를 필터라는 함수와 연결합니다. 일어서세요. 사용자가 필터 기준을 변경할 때마다 필터 기능이 호출됩니다.

전체 코드

다음은 필터 상자를 사용하여 요소 목록을 생성하고 렌더링하기 위한 전체 코드 예제입니다.




  
  JQuery筛选框
  
  <script>
    function filter() {
      var selected = $("#filter-select").val(); // 获取选择的筛选条件
      if(selected == "") { // 如果没有选择
        $("#filter-list li").show(); // 显示所有元素
      } else { // 如果选择了条件
        $("#filter-list li").hide(); // 隐藏所有元素
        $("." + selected).show(); // 显示与条件匹配的元素
      }
    }
    
    $(function() {
      $(&quot;#filter-select&quot;).change(filter); // 注册change事件并调用filter函数
    });
  </script>


  
    
    
      红色物品
      蓝色物品
      绿色物品