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

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

ただいまの
回答率

88.80%

Jqueryのフィルタリング(絞り込み)を実行したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 383

opticalbase

score 8

下記の、サンプルを実際に動作させたいと考えております。
途中まで動作していますが、「絞り込む」ボタンをクリックした移行の動作はまだ動作していません。
https://codepen.io/QAtool/pen/EzPzYR

javascriptで、チェックボックスをクリックした後に、ラベルが動作している機能は、以下のとおりです。

$(function() {
  $('input[name="catItems[]"]').on('change', function() {   
    var catItems = [];    
    $('input[name="catItems[]"]:checked').each(function() {
      catItems.push('<li class="tag-item">' + $(this).val() + '<span class="close"></span></li>');            
    });

    $('ul.tag-list').html(catItems);

    $('.tag-item').on('click', function(){
      $(this).remove();

      var text = $(this).text();
      $('.list-options input[value=' + text + ']').prop( 'checked', false );

    });

  });

  $('#clear').on('click', function() {
    if($("input:checkbox[name='catItems[]']").prop( 'checked', false )){

      $("input:checkbox[name='catItems[]']").prop( 'checked', false );
      $('ul.tag-list').html('');

    }
    return false;
  });

});

【行いたいこと】                        
① 『パターン01』〜『パターン07』のリストをデフォルトでは、display:noneで非表示にしたいです。

② チェックボックスをクリックした後に、ラベルが動作する点は、機能しています。
『パターン01』〜『パターン07』のリストを、「絞り込む」のボタンを押した際に、フィルタリングし表示したいです。

【フィルタリングは、下記data- にて、絞り込みの条件を指定しています】                                        
data-sex=    "men    wemen"            
data-tanmatsu=    "smart    pc    tablet"        
data-location=    "kanto    kansai    hokkaido    touhoku    kinki"

上記の値により、絞り込みを制御するプログラムに致したいと考えております。

何卒どうぞよろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • opticalbase

    2019/05/10 09:38 編集

    ご指摘の件、誠にありがとうございます。
    不足点と修正点を編集させて頂きました。
    至らない点があり、申し訳ありません。

    動作部分のご回答に関しましても、何卒、どうぞよろしくお願い致します。

    キャンセル

  • Lhankor_Mhy

    2019/05/10 10:10

    補足願います。

    1. 性別などの条件カテゴリ内は ORで絞込み、 条件カテゴリ間はANDで絞り込む、ということでいいのでしょうか?

    2. input要素のvalue属性の値と、data-属性の値が全くリンクしておらず、条件カテゴリも属性等に現れないのがしんどそうですが、これは必須の仕様ですか?

    キャンセル

  • opticalbase

    2019/05/10 10:25 編集

    お世話になっております。

    >1. 性別などの条件カテゴリ内は ORで絞込み、 条件カテゴリ間はANDで絞り込む、ということでいいのでしょうか?

    はい。性別をOR、その他は、ANDでお願い致します。

    >2. input要素のvalue属性の値と、data-属性の値が全くリンクしておらず、条件カテゴリも属性等に現れないのがしんどそうですが、これは必須の仕様ですか?

    data-sex="男性 女性"という形などに、改変しても問題ありません。
    シンプルな形で記述できたらと考えており、属性値などを変更しても結構です。
    どのようなコードで、実行が可能であるのかについて学びたいと考えております。

    何卒どうぞよろしくお願い致します。

    キャンセル

回答 1

checkベストアンサー

+1

HTMLの属性を追加変更しています。

    <div id="main">
        <h1>絞込検索</h1>    
        <form>
            <div class="list-box">
                <ul class="cat-list">
                    <li>
                        <span class="tl01">性別</span>
                        <ul class="list-options">
                            <li><label><input type="checkbox" name="catItems[]" value="men" data-category="sex">男性</label></li>
                            <li><label><input type="checkbox" name="catItems[]" value="wemen" data-category="sex">女性</label></li>
                        </ul>
                    </li>
                    <li>
                        <span class="tl02">端末</span>
                        <ul class="list-options">
                            <li><label><input type="checkbox" name="catItems[]" value="smart" data-category="tanmatsu">スマホ</label></li>
                            <li><label><input type="checkbox" name="catItems[]" value="pc" data-category="tanmatsu">PC</label></li>
                            <li><label><input type="checkbox" name="catItems[]" value="tablet" data-category="tanmatsu">タブレット</label></li>
                        </ul>
                    </li>
                    <li>
                        <span class="tl03">所在地</span>
                        <ul class="list-options">
                            <li><label><input type="checkbox" name="catItems[]" value="kanto" data-category="location">関東</label></li>
                            <li><label><input type="checkbox" name="catItems[]" value="kansai" data-category="location">関西</label></li>
                            <li><label><input type="checkbox" name="catItems[]" value="hokkaido" data-category="location">北海道</label></li>
                            <li><label><input type="checkbox" name="catItems[]" value="tohoku" data-category="location">東北</label></li>
                            <li><label><input type="checkbox" name="catItems[]" value="kinki" data-category="location">近畿</label></li>
                        </ul>
                    </li>
                </ul>

                <ul class="tag-list"></ul>

                <ul class="btn-box">
                    <li><div class="clear-box"><a id="clear" class="btn btn-clear">全てを解除</a></div></li>
                    <li><div class="submit-box"><button id="submit" type="submit" class="btn btn-submit">絞り込む</button></div></li>
                </ul>

            </div><!-- list-box -->
        </form>
    </div>


<div  data-sex="men wemen"  data-tanmatsu="smart pc tablet" data-location="kanto" class="list">    パターン01    </div>

<div  data-sex="men " data-tanmatsu="smart tablet" data-location="kanto" class="list">    パターン02    </div>

<div  data-sex="men wemen"  data-tanmatsu="pc tablet" data-location="kanto"  class="list">    パターン03    </div>

<div  data-sex="men wemen"  data-tanmatsu="smart tablet" data-location="kanto" class="list">    パターン04    </div>


<div  data-sex="men wemen" data-tanmatsu="smart pc" data-location="kanto" class="list">    パターン05    </div>

<div  data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto" class="list">    パターン06    </div>

<div  data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto kansai hokkaido tohoku" class="list">    パターン07    </div>
    $('.list').show();
    for ( let category of ['sex', 'tanmatsu', 'location'] ){ //カテゴリごとに
      // チェックされている条件を配列化
      const categoryItems = Array.from( $(`input[data-category~="${category}"]:checked`), e => e.value );
      // 何もチェックされていなければスキップ
      if ( categoryItems.length == 0 ) continue;
      // チェックされている条件のリストを抜き出すセレクタ
      const categorySelector = categoryItems.map( item => `div[data-${category}~="${item}"]`).join();
      // 条件を反転して隠す
      $(`.list`).not(categorySelector).hide();
    }
コメントを受けて追記
$(function() {
  $('input[name="catItems[]"]').on('change', function() {   
    var catItems = [];    
    $('input[name="catItems[]"]:checked').each(function() {
      catItems.push('<li class="tag-item">' + $(this).val() + '<span class="close"></span></li>');            
    });

    $('ul.tag-list').html(catItems);

    $('.tag-item').on('click', function(){
      $(this).remove();

      var text = $(this).text();
      $('.list-options input[value=' + text + ']').prop( 'checked', false );

    });

  });

  $('#clear').on('click', function(e) {
   if($("input:checkbox[name='catItems[]']").prop( 'checked', false )){

      $("input:checkbox[name='catItems[]']").prop( 'checked', false );
      $('ul.tag-list').html('');

    }

    return false;

  });

  $('form').on('submit', function(e){
    e.preventDefault();

    $('.list').show();
    for ( let category of ['sex', 'tanmatsu', 'location'] ){ //カテゴリごとに
      // チェックされている条件を配列化
      const categoryItems = Array.from( $(`input[data-category~="${category}"]:checked`), e => e.value );
      // 何もチェックされていなければスキップ
      if ( categoryItems.length == 0 ) continue;
      // チェックされている条件のリストを抜き出すセレクタ
      const categorySelector = categoryItems.map( item => `div[data-${category}~="${item}"]`).join();
      // 条件を反転して隠す
      $(`.list`).not(categorySelector).hide();
    }

  });

});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/11 07:45

    ご連絡頂き、誠にありがとうございます。

    $('input[name="catItems[]"]').on('change', function() {
    の中に収める形で、
    return false;
    以前に、収めて、動作をさせてみました。

    https://codepen.io/QAtool/pen/pmyzMO

    「女性」「タブレット」をチェックした際に、
    『パターン01』
    『パターン03』
    『パターン04』
    『パターン06』
    『パターン07』
    が絞り込まれる形になっていなかったため、私の設定が間違っている点などありましたら、ご指摘頂けますと幸いです。

    何卒どうぞよろしくお願い致します。

    キャンセル

  • 2019/05/11 14:24

    > $('input[name="catItems[]"]').on('change', function() {
    > の中に収める形で、
    > return false;
    > 以前に、収めて、動作をさせてみました。

    とのことですが、ご提示のURLのコードはそのような形になっていないようでした。
    $('#clear').on('click', function(e) {
    のイベントの中に入っています。

    動作確認ができたスクリプト全体を追記しますので、こちらでご確認いただけますか?

    キャンセル

  • 2019/05/11 18:26

    誠にありがとうごさいます。

    確認し、無事動作していることを確認致しました。
    ありがとうごさいます。

    キャンセル

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

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

関連した質問

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