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

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

ただいまの
回答率

88.78%

ソート時選択項目がない時最初の表示に戻したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 326

a2s

score 26

前提・実現したいこと

https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
↑の3を使用してソートするリストを作成したのですが、
選択がない状態に戻った際、最初に表示されているのと同じく、項目を最初の4件までの表示にしたいです。

・項目、タグのand検索をする
・項目、タグがひとつも選択されていない状態のとき(最初にページを開いた状態含)は、上位4つの中身のみを表示し、あとは「続きを見る」ボタンを表示させる
→「続きを見る」ボタンを押すと残りの中身が2個ずつ表示されていく

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

    <ul class="search-box">
        <li>
            <label><input type="checkbox" name="koumoku" id="koumoku1" value="koumoku1" />項目1</label>
        </li>
        <li>
            <label><input type="checkbox" name="koumoku" id="koumoku2" value="koumoku2" />項目2</label>
        </li>
        <li>
            <label><input type="checkbox" name="koumoku" id="koumoku3" value="koumoku3" />項目3</label>
        </li>
        <li>
            <label><input type="checkbox" name="koumoku" id="koumoku4" value="koumoku4" />項目4</label>
        </li>
        <li>
            <label><input type="checkbox" name="koumoku" id="koumoku5" value="koumoku5" />項目5</label>
        </li>
    </ul>
    <ul class="search-box">
        <li>
            <label for="tag1" class="tag"><input type="checkbox" name="tag" id="tag1" value="tag1" />タグ1</label>
        </li>
        <li>
            <label for="tag2" class="tag"><input type="checkbox" name="tag" id="tag2" value="tag2" />タグ2</label>
        </li>
        <li>
            <label for="tag3" class="tag"><input type="checkbox" name="tag" id="tag3" value="tag3" />タグ3</label>
        </li>
        <li>
            <label for="tag4" class="tag"><input type="checkbox" name="tag" id="tag4" value="tag4" />タグ4</label>
        </li>
        <li>
            <label for="tag5" class="tag"><input type="checkbox" name="tag" id="tag5" value="tag5" />タグ5</label>
        </li>
    </ul>

    <div class="contents">
        <ul class="flex" id="searchList">
            <li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>
                中身
                項目:1、タグ1,タグ2
            </li>
            <li data-koumoku='koumoku2' data-tag='["tag2"]'>
                中身
                項目:2、タグ2
            </li>
            <li data-koumoku='koumoku3' data-tag='["tag3"]'>
                中身
                項目:3、タグ3
            </li>
            <li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>
                中身
                項目:4、タグ4,タグ2
            </li>
            <li data-koumoku='koumoku5' data-tag='["tag5"]'>
                中身
                項目:5、タグ5
            </li>
            <li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>
                中身
                項目:1、タグ1,タグ2
            </li>
            <li data-koumoku='koumoku2' data-tag='["tag2"]'>
                中身
                項目:2、タグ2
            </li>
            <li data-koumoku='koumoku3' data-tag='["tag3"]'>
                中身
                項目:3、タグ3
            </li>
            <li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>
                中身
                項目:4、タグ4,タグ2
            </li>
            <li data-koumoku='koumoku5' data-tag='["tag5"]'>
                中身
                項目:5、タグ5
            </li>
        </ul>
        <div id="moreBtn">続きを表示</div>
    </div>
</body></html>
var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
var listItem = '#searchList li'; // 絞り込み対象のアイテム
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);
        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;
}
// 項目件数表示設定 //
var serchList = $("#searchList li").length;
$('#searchList').each(function(){
    //最初に表示させるアイテムの数
    var Num = 4,
    gtNum = Num-1;
    //最初はmoreボタン表示にし、
    $('#searchList').find('#moreBtn').removeClass('is-hide');
    //10行目まで表示
    $('#searchList').find("li:not(:lt("+Num+"))").addClass('is-hide');
    //moreボタンがクリックされた時
    $('#moreBtn').click(function(){
        Num +=2;
        $(this).parent().find("li:lt("+Num+")").fadeIn();
        //liの個数よりNumが多い時、
        if(serchList <= Num){
            $('#moreBtn').hide();
        }
    });
});
.is-hide {
    display: none;
}

試したこと

jQuery内の「if(searchData.length === 0 || searchData[0] === '') {~}」部分に項目件数表示設定を追加すれば良いのかなと思ったのですが、うまく動作しませんでした。
どの部分にどう追加すればよいのでしょうか…?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yambejp

    2019/05/09 09:44 編集

    結局なにがしたいのかわかりません
    項目、タグのand検索をして表示対象が5つ以上あったら上位4つを表示するのですか?
    「ALLを選択している場合」とはなんでしょう?「ALL」に当たる要素がありません
    また、ひとつもチェックされていないときは中身 項目は一つも表示しないのですよね?

    続きを表示はクリックすると全部表示されるのでしょうか?
    4個ずつ増えていくのでしょうか?

    キャンセル

  • a2s

    2019/05/09 09:52

    >「ALLを選択している場合」とはなんでしょう?「ALL」に当たる要素がありません
    失礼しました。参考サイトのソースをそのまま使用していたので、残った状態になっていました。
    「ALL」はありません。
    また、実現したいことに詳細を追記いたしました。

    キャンセル

回答 1

checkベストアンサー

0

項目4にタグ4とありますが実際に入っているのはtag1ですね
続きを読むはとりあえずおいておいて、挙動はこれであっていますか?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
  $('.search-box input').on('change',function(){
    var k=$('.search-box [name=koumoku]:checked').map(function(){
      return $(this).val();
    }).get();
    var t=$('.search-box [name=tag]:checked').map(function(){
      return $(this).val();
    }).get();
    $('#searchList li').hide().filter(function(){
      var flg_t=(k.length==0)?true:$.inArray($(this).data('koumoku'),k)>=0;
      var flg_k=(t.length==0)?true:$(this).data('tag').some(function(x){return $.inArray(x,t)>=0;});
      return flg_t && flg_k;
    }).show();
  }).eq(0).trigger('change');
});
</script>
<ul class="search-box">
<li>
<label><input type="checkbox" name="koumoku" id="koumoku1" value="koumoku1" />項目1</label></li>
<li><label><input type="checkbox" name="koumoku" id="koumoku2" value="koumoku2" />項目2</label></li>
<li><label><input type="checkbox" name="koumoku" id="koumoku3" value="koumoku3" />項目3</label></li>
<li><label><input type="checkbox" name="koumoku" id="koumoku4" value="koumoku4" />項目4</label></li>
<li><label><input type="checkbox" name="koumoku" id="koumoku5" value="koumoku5" />項目5</label></li>
</ul>
<ul class="search-box">
<li><label for="tag1" class="tag"><input type="checkbox" name="tag" id="tag1" value="tag1" />タグ1</label></li>
<li><label for="tag2" class="tag"><input type="checkbox" name="tag" id="tag2" value="tag2" />タグ2</label></li>
<li><label for="tag3" class="tag"><input type="checkbox" name="tag" id="tag3" value="tag3" />タグ3</label></li>
<li><label for="tag4" class="tag"><input type="checkbox" name="tag" id="tag4" value="tag4" />タグ4</label></li>
<li><label for="tag5" class="tag"><input type="checkbox" name="tag" id="tag5" value="tag5" />タグ5</label></li>
</ul>

<div class="contents">
<ul class="flex" id="searchList">
<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身1 項目:1、タグ1,タグ2</li>
<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身2 項目:2、タグ2</li>
<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身3 項目:3、タグ3</li>
<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身4 項目:4、タグ4,タグ2</li>
<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身5 項目:5、タグ5</li>
<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身6 項目:1、タグ1,タグ2</li>
<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身7 項目:2、タグ2</li>
<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身8 項目:3、タグ3</li>
<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身9 項目:4、タグ4,タグ2</li>
<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身10 項目:5、タグ5</li>
</ul>
<div id="moreBtn">続きを表示</div>
</div>

続きを表示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var view_length_default = 4;
var view_length_add = 2;
$(function() {
  $('.search-box input').on('change',function(){
    view(view_length_default);
  }).eq(0).trigger('change');
  $('#moreBtn').on('click',function(){
    view($('#searchList li:visible').length+view_length_add);
  });
  function view(view_length){
    var k=$('.search-box [name=koumoku]:checked').map(function(){
      return $(this).val();
    }).get();
    var t=$('.search-box [name=tag]:checked').map(function(){
      return $(this).val();
    }).get();
    var ele=$('#searchList li').hide().filter(function(){
      var flg_t=(k.length==0)?true:$.inArray($(this).data('koumoku'),k)>=0;
      var flg_k=(t.length==0)?true:$(this).data('tag').some(function(x){return $.inArray(x,t)>=0;});
      return flg_t && flg_k;
    });
    ele.filter(':lt('+view_length+')').show();
    $('#moreBtn').toggle(ele.length>view_length);
  }
});
</script>
<ul class="search-box">
<li>
<label><input type="checkbox" name="koumoku" id="koumoku1" value="koumoku1" />項目1</label></li>
<li><label><input type="checkbox" name="koumoku" id="koumoku2" value="koumoku2" />項目2</label></li>
<li><label><input type="checkbox" name="koumoku" id="koumoku3" value="koumoku3" />項目3</label></li>
<li><label><input type="checkbox" name="koumoku" id="koumoku4" value="koumoku4" />項目4</label></li>
<li><label><input type="checkbox" name="koumoku" id="koumoku5" value="koumoku5" />項目5</label></li>
</ul>
<ul class="search-box">
<li><label for="tag1" class="tag"><input type="checkbox" name="tag" id="tag1" value="tag1" />タグ1</label></li>
<li><label for="tag2" class="tag"><input type="checkbox" name="tag" id="tag2" value="tag2" />タグ2</label></li>
<li><label for="tag3" class="tag"><input type="checkbox" name="tag" id="tag3" value="tag3" />タグ3</label></li>
<li><label for="tag4" class="tag"><input type="checkbox" name="tag" id="tag4" value="tag4" />タグ4</label></li>
<li><label for="tag5" class="tag"><input type="checkbox" name="tag" id="tag5" value="tag5" />タグ5</label></li>
</ul>

<div class="contents">
<ul class="flex" id="searchList">
<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身1 項目:1、タグ1,タグ2</li>
<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身2 項目:2、タグ2</li>
<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身3 項目:3、タグ3</li>
<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身4 項目:4、タグ4,タグ2</li>
<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身5 項目:5、タグ5</li>
<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身6 項目:1、タグ1,タグ2</li>
<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身7 項目:2、タグ2</li>
<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身8 項目:3、タグ3</li>
<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身9 項目:4、タグ4,タグ2</li>
<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身10 項目:5、タグ5</li>
</ul>
<div id="moreBtn">続きを表示</div>
</div>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/09 10:58

    はい、記載していただいたもので挙動は合っています。

    キャンセル

  • 2019/05/09 12:31

    「続きを表示」の部分を追加しておきました

    キャンセル

  • 2019/05/09 16:45

    ありがとうございます!
    追加いただいたもので想定した動きになりました。

    キャンセル

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

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

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