61511


こういった絞り込みを実装してみたくて、以下のサイトをそのままコピーしてindex.htmlを作ってみたのですが、うまく動きません。ご教示いただけないでしょうか？  
<https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html>

[code]

     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 = $(listItem).eq(j).data(name);
                // 絞り込み対象かどうかを調べる
                if(searchData.indexOf(itemData) === -1) {
                    $(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;
[/code]

[code]

     .search_item {
        display: inline-block;
        padding: 3px;
        cursor: pointer;
    }
    .search_item.is-active {
        color: white;
        background-color: black;
    }
    .is-hide {
        display: none;
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>JavaScript Practice</title>
    </head>
    <body>
        <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>
        </form>
        
        <ul class="list">
            <li class="list_item" data-kind="野菜" data-color="赤色">いちご 種類: 野菜 色: 赤色</li>
            <li class="list_item" data-kind="野菜" data-color="黄色">かぼちゃ 種類: 野菜 色: 黄色</li>
            <li class="list_item" data-kind="野菜" data-color="緑色">キャベツ 種類: 野菜 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="赤色">さくらんぼ 種類: 果物 色: 赤色</li>
            <li class="list_item" data-kind="野菜" data-color="緑色">すいか 種類: 野菜 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="緑色">キウイ 種類: 果物 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="黄色">バナナ 種類: 果物 色: 黄色</li>
            <li class="list_item" data-kind="野菜" data-color="緑色">メロン 種類: 野菜 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="赤色">りんご 種類: 果物 色: 赤色</li>
            <li class="list_item" data-kind="果物" data-color="黄色">レモン 種類: 果物 色:黄色 </li>
        </ul>
    
    </body>
    </html>
[/code]


CC BY-SA 4.0
2019-12-17T08:45:51.317
61510
2019-12-17T08:52:59.350
2019-12-17T08:52:59.350
32986
35794
question
javascript
JavaScriptの絞り込みがうまく動かない


  1. 参考先の Web サイトでは jQuery を使用しているため、 jQuery を読み込む必要がありますが、質問者さんのコード内では読み込まれていません。
  2. 参考先のコードと質問文のコードを読み比べると、質問文のコードは CSS と JavaScript のコードの下部の記述が欠けているため、正常に実行が行われていません。

以上の二点を修正すると以下のようになり、絞込み機能が参考先の Web サイトのように動作していることが確認出来ます。

[code]

    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;
    }
[/code]

[code]

    .search_item {
        display: inline-block;
        padding: 3px;
        cursor: pointer;
    }
    .search_item.is-active {
        color: white;
        background-color: black;
    }
    .is-hide {
        display: none;
        }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>JavaScript Practice</title>
    </head>
    <body>
        <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>
        </form>
        
        <ul class="list">
            <li class="list_item" data-kind="野菜" data-color="赤色">いちご 種類: 野菜 色: 赤色</li>
            <li class="list_item" data-kind="野菜" data-color="黄色">かぼちゃ 種類: 野菜 色: 黄色</li>
            <li class="list_item" data-kind="野菜" data-color="緑色">キャベツ 種類: 野菜 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="赤色">さくらんぼ 種類: 果物 色: 赤色</li>
            <li class="list_item" data-kind="野菜" data-color="緑色">すいか 種類: 野菜 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="緑色">キウイ 種類: 果物 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="黄色">バナナ 種類: 果物 色: 黄色</li>
            <li class="list_item" data-kind="野菜" data-color="緑色">メロン 種類: 野菜 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="赤色">りんご 種類: 果物 色: 赤色</li>
            <li class="list_item" data-kind="果物" data-color="黄色">レモン 種類: 果物 色:黄色 </li>
        </ul>
    
    </body>
    </html>
[/code]


CC BY-SA 4.0
2019-12-17T08:51:40.527
61511
2019-12-17T08:51:40.527
32986
61510
answer