質問編集履歴

5

修正

2022/03/29 02:42

投稿

takashipon0326
takashipon0326

スコア0

test CHANGED
File without changes
test CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
13
13
  ```
14
- style>
14
+ <style>
15
15
  .search-box_label {
16
16
  font-weight: bold;
17
17
  }
@@ -25,7 +25,7 @@
25
25
  margin: 0 10px;
26
26
  padding:0;
27
27
  }
28
- /style>
28
+ </style>
29
29
  <form>
30
30
  <div class="search-box">
31
31
  <span class="search-box_label">Category:</span>

4

修正

2022/03/29 02:37

投稿

takashipon0326
takashipon0326

スコア0

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,7 @@
4
4
  moreボタンのscriptにより、ページ読み込み時に7番目以降が非表示(moreクリック時に表示)の対象になるため、絞り込み後、6番目までに絞り込みの対象物がない場合、moreボタンだけが表示され対象物が出るまでmoreをクリックしないと表示されない状況です。
5
5
 
6
6
  実現したいのは、絞り込み後も対象数が7以上の場合7番目以降を非表示にしmoreボタンをクリックで追加表示を実装したいです。
7
+ (例えば「JavaScript」を選択(絞り込み)した場合、対象物の「JavaScript」が7個以上であれば、JavaScriptの7個目以降のみis-hiddenとし、moreボタンクリックで追加表示したいと思っております。)
7
8
 
8
9
  色々調べながら試行錯誤したのですが、javascript,jquery初心者のため、解決策が分からず...
9
10
  お力添えいただけますと幸いです。

3

修正

2022/03/29 02:36

投稿

takashipon0326
takashipon0326

スコア0

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,9 @@
2
2
  絞り込み後のmoreボタンの挙動でつまづきました。
3
3
 
4
4
  moreボタンのscriptにより、ページ読み込み時に7番目以降が非表示(moreクリック時に表示)の対象になるため、絞り込み後、6番目までに絞り込みの対象物がない場合、moreボタンだけが表示され対象物が出るまでmoreをクリックしないと表示されない状況です。
5
+
6
+ 実現したいのは、絞り込み後も対象数が7以上の場合7番目以降を非表示にしmoreボタンをクリックで追加表示を実装したいです。
7
+
5
8
  色々調べながら試行錯誤したのですが、javascript,jquery初心者のため、解決策が分からず...
6
9
  お力添えいただけますと幸いです。
7
10
 

2

修正

2022/03/27 07:34

投稿

takashipon0326
takashipon0326

スコア0

test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,13 @@
13
13
  }
14
14
  .is-hide {
15
15
  display: none;
16
+ }
17
+ .list li.is-hidden {
18
+ visibility: hidden;
19
+ opacity: 0;
20
+ height: 0;
21
+ margin: 0 10px;
22
+ padding:0;
16
23
  }
17
24
  </style>
18
25
  <form>

1

修正

2022/03/27 07:31

投稿

takashipon0326
takashipon0326

スコア0

test CHANGED
@@ -1 +1 @@
1
- jQueryでリスト表示を絞り込む処理を実装したあとに、moreボタンを組み合わせたところ、絞り込み後の挙動がうまくいきません。
1
+ jQueryでリスト表示を絞り込む処理を実装したあとに、moreボタンを組み合わせたところ、絞り込み後のmoreボタンの挙動がうまくいきません。
test CHANGED
@@ -129,6 +129,12 @@
129
129
  Category: HTML・CSS,殿堂入り Tag: Sass,CSSの設計
130
130
  </li>
131
131
  </ul>
132
+
133
+
134
+ <div class="more">
135
+ <button>もっと見る</button>
136
+ </div>
137
+
132
138
  <script>
133
139
  var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
134
140
  var listItem = '.list_item'; // 絞り込み対象のアイテム