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

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

ただいまの
回答率

87.61%

JavaScriptで複数項目の条件を絞り込み、bootstrapのサイトに詰めて表示させる方法

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 1,365

score 4

前提・実現したいこと

bootstrapのサイトに複数項目で条件を絞り込み、該当の項目のみ表示させたい。

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

複数項目で条件を絞り込むJavaScriptを参考にさせていただいたページから引用させていただいたのですが、
それをbootstrapのdivの中に入れると、絞り込んで該当から外れた要素が空白で残ってしまいます。
見た目をdispley:none;のようにしたいのですが、visivility:hidden;のように見える状態です。
該当の項目だけを詰めて表示させるにはどうしたらいいのでしょうか

該当のソースコード




<div class="row">
<div class="col-lg-4 col-md-6 col-12">
<li class="list_item" data-price="40,000円" data-season="春夏" data-pattern="チェック" data-color="カーキ">生地番号:0001 値段: 40,000円 種類: 春夏 柄: チェック 色: カーキ
<div class="product-wrapper mb-60">
<div class="product-img">
<a href="product-details.html">
<img alt="" src="assets/img/products/11.jpg">
</a>
</div>                                                   
</div>
</li>
</div>



</div>



<script>
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;
    }
    </script>

試したこと

JavaScriptについてのサイトを見ながら、それらしい記述をいくつか入れて見ましたが、うまく表示されませんでした。

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

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • x_x

    2019/11/05 16:15

    div 要素の子として li は取れません。
    参考にしたものと比べて修正してみてください。

    キャンセル

  • mmomiji

    2019/11/05 16:43

    すみません。記述したdiv要素の上にulがあります。すごく長くなってしまうので割愛してしまいました。
    参考にしたものは、リストとして成立してて、リストで記述した場合うまくいきました。それをbootstrapの<div class="col-lg-4 col-md-6 col-12">のdivに入れた場合、該当のものと同じように、選択の該当外のものも空白でスペースを取ってしまうので、見た目が歯抜け状態での表示になってしまいます。該当のものだけを詰めて表示させるには、JavaScriptを書き直すのか、CSSで何か上手い書き方があるのか分からず、行き詰まってしまっている状態です。

    キャンセル

  • mmomiji

    2019/11/06 10:40

    すみません。ありがとうございました。自己解決しました。リストをやめて<div class="col-lg-4 col-md-6 col-12">のなかにliタグの中身を入れたら、ちゃんと動作しました。大変お騒がせしました。

    キャンセル

まだ回答がついていません

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

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

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