質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

JavaScript 絞り込み表示の項目を増やす

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,766

root2

score 14

 前提・実現したいこと

https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
上の「3. 配列を使ってリスト側に複数の値を設定できるようにする」を参考にして
javascriptで絞り込みの表示を作成しております。

例:
項目1【タイプ】 カットソー ワンピース スカート
項目2【色】 赤 黄色 青 緑
項目3【サイズ】 S M L

各項目にチェックを入れると商品のリストから該当するものだけが表示されます。
項目1のみがラジオボタンで1つしか選択できないもの、他の項目はチェックボタンでいくつでも選択できるようにしたいです。

 発生している問題・エラーメッセージ

JavaScript初心者です。
参考資料は、項目1と項目2しかないため、自力で項目3を増やすことができません。
ご教授のほどよろしくお願いいたします。

 該当のソースコード

var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
var listItem = '.list_item';   // 絞り込み対象のアイテム
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で選択されている値の一覧を取得する
 * @param  {String} name 対象にするinputのname属性の値
 * @return {Array}       選択されているinputのvalue属性の値
 */
function get_selected_input_items(name) {
    var searchData = [];
    $('[name=' + name + ']:checked').each(function() {
        searchData.push($(this).val());
    });
    return searchData;
}

/**
 * リスト内のアイテムに設定している値の一覧を取得する
 * @param  {Object} target 対象にするアイテムのjQueryオブジェクト
 * @param  {String} data   対象にするアイテムのdata属性の名前
 * @return {Array}         対象にするアイテムのdata属性の値
 */
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;
}

 試したこと

ここに問題に対して試したことを記載してください。

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2018/11/07 11:37

    具体的に何をどうしたいかもっと明確に例示してください

    キャンセル

回答 1

checkベストアンサー

+1

ソースを見る限り、Javascriptの修正をしなくても、項目3に対応出来ていると思います。
試しに、HTMLを以下のようにしてみて下さい。きっと項目3で絞り込まれると思います。

<form>
    <div class="search-box">
        <span class="search-box_label">種類:</span>
        <input type="radio" name="kind" value="">ALL
        <input type="radio" name="kind" value="野菜">野菜
        <input type="radio" name="kind" value="果物">果物
    </div>

    <div class="search-box">
        <span class="search-box_label">色:</span>
        <input type="checkbox" name="color" value="赤色">赤色
        <input type="checkbox" name="color" value="緑色">緑色
        <input type="checkbox" name="color" value="黄色">黄色
    </div>

    <div class="search-box">
        <span class="search-box_label">サイズ:</span>
        <input type="checkbox" name="size" value="S">S
        <input type="checkbox" name="size" value="M">M
        <input type="checkbox" name="size" value="L">L
    </div>
</form>

<ul class="list">
    <li class="list_item" data-kind="野菜" data-color="赤色" data-size="S">いちご 種類: 野菜 色: 赤色</li>
    <li class="list_item" data-kind="野菜" data-color="黄色" data-size="S">かぼちゃ 種類: 野菜 色: 黄色</li>
    <li class="list_item" data-kind="野菜" data-color="緑色" data-size="S">キャベツ 種類: 野菜 色: 緑色</li>
    <li class="list_item" data-kind="果物" data-color="赤色" data-size="S">さくらんぼ 種類: 果物 色: 赤色</li>
    <li class="list_item" data-kind="野菜" data-color="緑色" data-size="S">すいか 種類: 野菜 色: 緑色</li>
    <li class="list_item" data-kind="果物" data-color="緑色" data-size="S">キウイ 種類: 果物 色: 緑色</li>
    <li class="list_item" data-kind="果物" data-color="黄色" data-size="S">バナナ 種類: 果物 色: 黄色</li>
    <li class="list_item" data-kind="野菜" data-color="緑色" data-size="S">メロン 種類: 野菜 色: 緑色</li>
    <li class="list_item" data-kind="果物" data-color="赤色" data-size="M">りんご 種類: 果物 色: 赤色</li>
    <li class="list_item" data-kind="果物" data-color="黄色" data-size="L">レモン 種類: 果物 色:黄色 </li>
</ul>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/07 13:14

    ご提示いただいたHTMLで問題なく動作しました。
    自分でHTMLを変更した時にうまくいかなかったので、JSの変更が必要なのだと思い込んでおりました。
    ご教授いただき、誠にありがとうござました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る