KH-WEBLOG TOP > WEBメモ > JavaScript > 複数条件で要素をリアルタイムに絞り込み:jQuery

複数条件で要素をリアルタイムに絞り込み:jQuery

最終更新日:

jQueryで、HTMLのdata属性に指定した値で要素を絞り込む方法をご紹介します。

コーディング・WordPress化作業を代行します

jQueryの記述


var searchBox = ".filter dd"; // 絞り込む項目を選択するエリア
var listItem = ".sitem"; // 絞り込み対象のアイテム
var hideClass = "is-hide"; // 絞り込み対象外の場合に付与されるclass名

$(function () {
  // 絞り込み項目を変更した時
  $(document).on("change", searchBox + " input", function () {
    search_filter();
  });
});

/*
絞り込みを行う
*/
function search_filter() {
  // 非表示状態を解除
  $(listItem).removeClass(hideClass);
  for (var i = 0; i < $(searchBox).length; i++) {
    var name = $(searchBox).eq(i).find("input").attr("name");
    // 選択されている項目を取得
    var searchData = get_selected_input_items(name);
    // 選択されている項目がない、またはALLを選択している場合は飛ばす
    if (searchData.length === 0 || searchData[0] === "") {
      continue;
    }
    // リスト内の各アイテムをチェック
    for (var j = 0; j < $(listItem).length; j++) {
      // アイテムに設定している項目を取得
      var itemData = get_setting_values_in_item($(listItem).eq(j), name);
      // 絞り込み対象かどうかを調べる
      var check = array_match_check(itemData, searchData);
      if (!check) {
        $(listItem).eq(j).addClass(hideClass);
      }
    }
  }
}

/*
inputで選択されている値の一覧を取得する
*/
function get_selected_input_items(name) {
  var searchData = [];
  $("[name=" + name + "]:checked").each(function () {
    searchData.push($(this).val());
  });
  return searchData;
}

/*
リスト内のアイテムに設定している値の一覧を取得
*/
function get_setting_values_in_item(target, data) {
  var itemData = target.data(data);
  if (!Array.isArray(itemData)) {
    itemData = [itemData];
  }
  return itemData;
}

/**
 * 2つの配列内で一致する文字列があるかどうかを調べる
 * @param  {Array} arr1 調べる配列1
 * @param  {Array} arr2 調べる配列2
 * @return {Boolean}    一致する値があるかどうか
 */
function array_match_check(arr1, arr2) {
  // 絞り込み対象かどうかを調べる
  var arrCheck = false;
  for (var i = 0; i < arr1.length; i++) {
    if (arr2.indexOf(arr1[i]) >= 0) {
      arrCheck = true;
      break;
    }
  }
  return arrCheck;
}

HTML・CSSの準備

<dl class="filter">
<dt>色</dt>
<dd>
<input type="radio" name="color" value="赤" id="c1"><label for="c1">赤</label>
<input type="radio" name="color" value="青" id="c2"><label for="c2">青</label>
<input type="radio" name="color" value="緑" id="c3"><label for="c3">緑</label>
<input type="radio" name="color" value="" id="c4"><label for="c4">all</label>
</dd>
<dt>サイズ</dt>
<dd>
<input type="radio" name="size" value="大" id="s1"><label for="s1">大</label>
<input type="radio" name="size" value="中" id="s2"><label for="s2">中</label>
<input type="radio" name="size" value="小" id="s3"><label for="s3">小</label>
<input type="radio" name="size" value="" id="s4"><label for="s4">all</label>
</dd>
</dl>

<h3>結果</h3>
<ul class="serchlist">
<li class="sitem" data-color='["赤","青"]' data-size="大">
赤青大
</li>
<li class="sitem" data-color='青' data-size="中">
青中
</li>
<li class="sitem" data-color='["青","緑"]' data-size="小">
青緑小
</li>
<li class="sitem" data-color='緑' data-size="大">
緑大
</li>
</ul>

ポイントは、
まず、inputのname属性でdata-○○の部分と同じ名前を指定します。

次に、結果部分にdata属性で各条件を指定します。
複数の条件を持つ場合は
data-color='[“赤”,”青”]’
のように配列で指定します。

.is-hide{display:none;}

あとは非表示用にis-hideクラスにdisplay:none;を指定するだけです。

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2024/06/07 12:15時点 | 楽天市場調べ)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン ブログカード プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク リンクカード レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 関連記事