jqueryでフィルターボックスを書く方法

JQuery は、HTML ドキュメントを簡単に操作できる強力な Javascript ライブラリで、ドキュメントの操作やイベントの処理が容易になります。この記事では、JQuery を使用してフィルター ボックスを作成する方法を学びます。これは非常に実践的なスキルになります。始める前に、JQuery の基本的な知識を持っている必要があります。

1. HTML 構造の作成

まず、フィルター ボックスを含むコンテナーを HTML で作成する必要があります。次のコードを使用して、select 要素と、オプションを含む子要素のリストを含む単純な 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>

上記のコードでは、「filter-container」という ID を持つコンテナーを作成します。容器。コンテナ内に「filter-select」というIDを持つselect要素があり、フィルター条件を選択するために使用されます。以下は、ID「filter-list」を持つ順序なしリストで、フィルターされるいくつかの項目が含まれています。

2. フィルター関数の作成

次に、選択したフィルター条件に基づいてフィルター処理に使用される要素を表示または非表示にするフィルター関数を作成する必要があります。 。この機能は、次のコードを使用して実現できます。

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

上記のコードでは、filter という関数を定義しました。この関数は、選択したフィルター基準を取得し、選択した基準に基づいて要素を表示または非表示にします。まず、JQuery セレクターを使用してフィルター条件の値を取得し、選択した変数に格納します。次に、if ステートメントを使用して、条件が選択されているかどうかを確認します。選択がない場合は、JQuery の show メソッドを使用してすべての要素が表示されます。条件が選択されている場合、hide メソッドを使用してすべての要素を非表示にし、フィルターを使用してフィルター条件に一致する要素をフィルターし、show メソッドを使用してこれらの要素を表示します。

3. ユーザー インタラクションへの応答

次に、フィルター関数をユーザー インタラクションに関連付ける必要があります。次のコードを使用して、フィルター関数を選択要素の変更イベントに関連付けることができます。

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

上記のコードでは、JQuery セレクターを使用してフィルター選択要素を選択し、変更メソッドを呼び出してそれをという名前の要素 フィルター関数が関連付けられます。ユーザーがフィルター基準を変更するたびに、フィルター関数が呼び出されます。

4. 完全なコード

フィルター ボックスを使用して要素のリストを作成およびレンダリングするための完全なコード例を次に示します。

  
  
  
  <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>


  

    
      所有
      红色
      蓝色
      绿色
    
    

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

これがチュートリアルの方法です。 JQuery を使用してフィルター ボックスを作成する方法がお役に立てれば幸いです。

以上がjqueryでフィルターボックスを書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。