質問編集履歴

2 記述の修正

a2s

a2s score 26

2019/04/09 15:07  投稿

jQueryを使用して、要素をソート+もっと見るボタンの実装
### 前提・実現したいこと
jQueryを使用して、
①最初の5件が表示された状態
①最初の10件が表示された状態
→「もっと見る」ボタンをクリックするたびに、5件ずつ表示されていく
②チェックボックスでのソート
└該当カテゴリの要素が表示され、5件以上ある場合は「もっと見る」ボタンを表示
└「もっと見るボタン」を押すと該当カテゴリの要素が5件ずつ表示される
というのを実装したいです。
### 発生している問題
①「もっと見る」ボタン用のJSの記述で実装ができた
②ソート用のJSの記述で実装ができた
→①と②を合わせると、ソートがうまく機能しない。
→また、ソートしたあと「もっと見る」を押すと、すべての要素が表示されてしまう
上手いことできないかと模索しているのですが、お分かりの方が居ましたらご教授いただけると幸いです。
```HTML
<!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>
```
```JQuery
//もっと見る
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;
}
```
```CSS
.is-hide {
display: none;
}
```
  • jQuery

    11943 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 記述追加

a2s

a2s score 26

2019/04/09 15:06  投稿

jQueryを使用して、要素をソート+もっと見るボタンの実装
### 前提・実現したいこと
jQueryを使用して、
①最初の5件が表示された状態
→「もっと見る」ボタンをクリックするたびに、5件ずつ表示されていく
②チェックボックスでのソート
└該当カテゴリの要素が表示され、5件以上ある場合は「もっと見る」ボタンを表示
└「もっと見るボタン」を押すと該当カテゴリの要素が5件ずつ表示される
というのを実装したいです。
### 発生している問題
①「もっと見る」ボタン用のJSの記述で実装ができた
②ソート用のJSの記述で実装ができた
→①と②を合わせると、ソートがうまく機能しない。  
→また、ソートしたあと「もっと見る」を押すと、すべての要素が表示されてしまう  
①+②で合わせると動かなくなる。
また、ソートした際
・ソート、「もっと見る」はそれぞれバラバラに実装はできた
 が、併せると動かなくなる
・さらに、ソートした際のカテゴリは引き継がれず、「もっと見る」ですべての要素が表示されてしまう
上手いことできないかと模索しているのですが、お分かりの方が居ましたらご教授いただけると幸いです。
```HTML
<!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>
```
```JQuery
//もっと見る
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;
}
```
```CSS
.is-hide {
display: none;
}
```
  • jQuery

    11943 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る