質問編集履歴
5
修正
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
|
-
|
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
|
-
|
28
|
+
</style>
|
29
29
|
<form>
|
30
30
|
<div class="search-box">
|
31
31
|
<span class="search-box_label">Category:</span>
|
4
修正
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
修正
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
修正
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
修正
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'; // 絞り込み対象のアイテム
|