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

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

ただいまの
回答率

88.79%

jQueryを使用して、要素をソート+もっと見るボタンの実装

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 958

a2s

score 26

前提・実現したいこと

jQueryを使用して、

①最初の10件が表示された状態
→「もっと見る」ボタンをクリックするたびに、5件ずつ表示されていく
②チェックボックスでのソート
└該当カテゴリの要素が表示され、5件以上ある場合は「もっと見る」ボタンを表示
└「もっと見るボタン」を押すと該当カテゴリの要素が5件ずつ表示される

というのを実装したいです。

発生している問題

①「もっと見る」ボタン用のJSの記述で実装ができた
②ソート用のJSの記述で実装ができた
→①と②を合わせると、ソートがうまく機能しない。
→また、ソートしたあと「もっと見る」を押すと、すべての要素が表示されてしまう

上手いことできないかと模索しているのですが、お分かりの方が居ましたらご教授いただけると幸いです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div class="search-box">
<input type="checkbox" name="category" value="カテゴリ-01">カテゴリ-01
<input type="checkbox" name="category" value="カテゴリ-02">カテゴリ-02
<input type="checkbox" name="category" value="カテゴリ-03">カテゴリ-03
<input type="checkbox" name="category" value="カテゴリ-04">カテゴリ-04
<input type="checkbox" name="category" value="カテゴリ-05">カテゴリ-05
<input type="checkbox" name="category" value="カテゴリ-06">カテゴリ-06
<input type="checkbox" name="category" value="カテゴリ-07">カテゴリ-07
<input type="checkbox" name="category" value="カテゴリ-08">カテゴリ-08
<input type="checkbox" name="category" value="カテゴリ-09">カテゴリ-09
<input type="checkbox" name="category" value="カテゴリ-10">カテゴリ-10
<input type="checkbox" name="category" value="カテゴリ-11">カテゴリ-11
<input type="checkbox" name="category" value="カテゴリ-12">カテゴリ-12
<input type="checkbox" name="category" value="カテゴリ-13">カテゴリ-13
<input type="checkbox" name="category" value="カテゴリ-14">カテゴリ-14
<input type="checkbox" name="category" value="カテゴリ-15">カテゴリ-15
<input type="checkbox" name="category" value="カテゴリ-16">カテゴリ-16
<input type="checkbox" name="category" value="カテゴリ-17">カテゴリ-17
<input type="checkbox" name="category" value="カテゴリ-18">カテゴリ-18
<input type="checkbox" name="category" value="カテゴリ-19">カテゴリ-19
<input type="checkbox" name="category" value="カテゴリ-20">カテゴリ-20
</div>

<ul class="list" id="number_list">
<li class="list_item" data-category='["カテゴリ-13", "カテゴリ-16"]'>Category: カテゴリ-13, カテゴリ-16</li>
<li class="list_item" data-category='["カテゴリ-14"]'>Category: カテゴリ-14</li>
<li class="list_item" data-category='["カテゴリ-06", "カテゴリ-19"]'>Category: カテゴリ-06, カテゴリ-19</li>
<li class="list_item" data-category='["カテゴリ-02", "カテゴリ-10"]'>Category: カテゴリ-02, カテゴリ-10</li>
<li class="list_item" data-category='["カテゴリ-17", "カテゴリ-20"]'>Category: カテゴリ-17, カテゴリ-20</li>
<li class="list_item" data-category='["カテゴリ-05"]'>Category: カテゴリ-05</li>
<li class="list_item" data-category='["カテゴリ-05", "カテゴリ-18"]'>Category: カテゴリ-05, カテゴリ-18</li>
<li class="list_item" data-category='["カテゴリ-01", "カテゴリ-14"]'>Category: カテゴリ-01, カテゴリ-14</li>
<li class="list_item" data-category='["カテゴリ-08"]'>Category: カテゴリ-08</li>
<li class="list_item" data-category='["カテゴリ-05", "カテゴリ-07", "カテゴリ-09", "カテゴリ-17"]'>Category: カテゴリ-05, カテゴリ-07, カテゴリ-09, カテゴリ-17</li>
<li class="list_item" data-category='["カテゴリ-12"]'>Category: カテゴリ-12</li>
<li class="list_item" data-category='["カテゴリ-03"]'>Category: カテゴリ-03</li>
<li class="list_item" data-category='カテゴリ-11'>Category: カテゴリ-11</li>
<li class="list_item" data-category='["カテゴリ-15", "カテゴリ-04"]'>Category: カテゴリ-15,カテゴリ-04</li>
</ul>
<button type=button id="more_btn">もっと見る</button>

</body>
</html>
//もっと見る
var listContents = $("#number_list li").length;
$("#number_list").each(function(){
    var Num = 10, //最初の表示件数
    gtNum = Num-1;
    $(this).find('#more_btn').show();
    $(this).find("li:not(:lt("+Num+"))").hide();
    $('#more_btn').click(function(){
        Num +=5; //5個ずつ追加
        $(this).parent().find("li:lt("+Num+")").slideDown();
        if(listContents <= Num){
            $('#more_btn').hide();
        }
    });

    //ソート
    $(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;
}
.is-hide {
display: none;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • stdio

    2019/04/09 17:07 編集

    単純にjQuery側ででHTMLを書いて、+=で文字列追加を行えば表示されるよ。こんな感じだね。
    ただしstr1とstr2は文字列である事。
    innerHTML += '<li class="list_item" data-category="' + str1 + '">' + str2 + '<li>';

    キャンセル

  • a2s

    2019/05/08 15:18

    遅くなってすみません。
    お教えいただいた方法で解決できました!ありがとうございました。

    キャンセル

  • stdio

    2019/05/08 15:22

    纏めになるけど、投稿しておきましたので質問の閉鎖をお願い致します。

    キャンセル

回答 1

checkベストアンサー

0

<ul class="list" id="number_list">に追加していくような形でいいと思います。

単純にjQuery側ででHTMLを書いて、+=で文字列追加を行えば表示されるよ。こんな感じです。

ただしstr1とstr2は文字列である事。
innerHTML += '<li class="list_item" data-category="' + str1 + '">' + str2 + '<li>';

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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