teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問JS表示件数の指定とボタンの表示切り替えができない

編集履歴

質問編集履歴

1

日時指定で非表示にするは確認できましたので、削除しました。

2018/10/07 10:38

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,8 @@
1
- JSを勉強中の初心者なのですが、うまく実装できません。
1
+ //もっと見る　以外の1〜3までが全て実装できません。
2
2
 
3
- いろいろと調べて見たのですが、わからないので教えてください。
3
+ エラーは出ていないです。
4
4
 
5
- よろしくお願いします。
5
+ 画面に反映されないので、どこが違うのかがわかりません。
6
6
 
7
7
 
8
8
 
@@ -12,9 +12,7 @@
12
12
 
13
13
  2、3件以上はもっとみるボタンをクリックして全て開くようにしたい
14
14
 
15
- 2、3件以下の場合は、ボタンを非表示にしたい
15
+ 3、3件以下の場合は、ボタンを非表示にしたい
16
-
17
- 3、締切日が過ぎたら削除したい
18
16
 
19
17
 
20
18
 
@@ -22,23 +20,15 @@
22
20
 
23
21
  <div class="item_box" >
24
22
 
25
- <div class="view_timer" data-end-date="2018/9/2 0:00">
26
-
27
- <ul class="item" id="col">
23
+ <ul class="item" id="col">
28
24
 
29
25
  <li class="item_title">タイトル</li>
30
26
 
31
27
  <li class="item_text">内容</li>
32
28
 
33
- <li class="item_date">締切：2018年9月2日</li>
34
-
35
- </ul>
29
+ </ul>
36
-
37
- </div>
38
30
 
39
31
 
40
-
41
- <div class="view_timer" data-end-date="2018/10/1 0:00">
42
32
 
43
33
  <ul class="item" id="col">
44
34
 
@@ -46,51 +36,29 @@
46
36
 
47
37
  <li class="item_text">内容</li>
48
38
 
49
- <li class="item_date">締切：2018年10月1日</li>
50
-
51
- </li>
52
-
53
- </ul>
39
+ </ul>
54
-
55
- </div>
56
40
 
57
41
 
58
42
 
59
- <div class="view_timer" data-end-date="2018/12/2 0:00">
60
-
61
- <ul class="item" id="col">
43
+ 　<ul class="item" id="col">
62
44
 
63
45
  <li class="item_title">タイトル</li>
64
46
 
65
47
  <li class="item_text">内容</li>
66
48
 
67
- <li class="item_date">締切：2018年12月2日（日）</li>
49
+ </ul>
68
50
 
69
- </li>
70
51
 
71
- </ul>
72
52
 
73
- </div>
74
-
75
-
76
-
77
- <div class="view_timer" data-end-date="2018/12/31 0:00">
78
-
79
- <ul class="item" id="col">
53
+ 　　　<ul class="item" id="col">
80
54
 
81
55
  <li class="item_title">タイトル</li>
82
56
 
83
57
  <li class="item_text">内容</li>
84
58
 
85
- <li class="item_date">締切：2018年12月31日（日）</li>
59
+ </ul>
86
60
 
87
- </li>
88
-
89
- </ul>
90
-
91
- </div>
92
-
93
- <div class="more_btn" id="morebtn">もっとみる</div>
61
+ <div class="more_btn" id="more">もっとみる</div>
94
62
 
95
63
  </div>
96
64
 
@@ -106,13 +74,13 @@
106
74
 
107
75
  　　i = i + 1; 　　　　　　　　　　　　　　　　　　　　　　　
108
76
 
109
- 　　var more = 3; 　　　　　　　　　　　　　　　　　　　　　　　
77
+ 　　var more = 3; 　　　　　//3件表示する　　　　　　　　　　　　　　　　　　
110
78
 
111
79
  　　$("#morebtn" + i ).hide();　　
112
80
 
113
- 　　$("#col" + i +" li:not(:lt("+more+"))").hide();
81
+ 　　$("#col" + i +" li:not(:lt("+more+"))").hide();//3件以上は記事を非表示にする
114
82
 
115
- 　　if($("#col" + i + " li").length > more) {　　　
83
+ 　　if($("#col" + i + " li").length > more) {　//3件以上はボタンを表示する　　
116
84
 
117
85
  $("#morebtn" + i ).show();
118
86
 
@@ -122,23 +90,17 @@
122
90
 
123
91
  　　$(".more").click(function () {　　
124
92
 
125
-
126
-
127
93
  id = $(this).attr("id");　　　 　　　　　　
128
94
 
129
95
  var num = id.substr(3,1);　　　　　　　　　　　
130
96
 
131
- if ($("#u" + num + " li:eq("+more+")").is(":hidden")) {
97
+ if ($("#col" + num + " li:eq("+more+")").is(":hidden")) {
132
98
 
133
-
134
-
135
- $("#u" + num + " li:hidden").show();　
99
+ $("#col" + num + " li:hidden").show();　//記事を表示する
136
100
 
137
101
  } else {
138
102
 
139
-
140
-
141
- $("#u" + num + " li:not(:lt("+more+"))").hide();
103
+ $("#col" + num + " li:not(:lt("+more+"))").hide();　//記事を非表示にする
142
104
 
143
105
  }
144
106
 
@@ -148,45 +110,17 @@
148
110
 
149
111
 
150
112
 
151
- //日時指定で非表示にする
113
+ //もっと見る
152
114
 
153
- $(document).ready(function() {
115
+ 　　$(function(){
154
116
 
155
- $(".view_timer").each(function(index, target) {
117
+ 　　$('.more').click(function(){
156
118
 
157
- var startDate = $(this).attr("data-start-date");
119
+ 　　$(this).hide();
158
120
 
159
- var endDate = $(this).attr("data-end-date");
121
+ 　　$(this).parent('.item_box').removeClass('onhidden');
160
122
 
161
- var nowDate = new Date();
162
-
163
- if (startDate) {
164
-
165
- startDate = new Date(startDate);
166
-
167
- } else {
168
-
169
- startDate = nowDate;
170
-
171
- }
172
-
173
- if (endDate) {
174
-
175
- endDate = new Date(endDate);
176
-
177
- }
178
-
179
- if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
180
-
181
- $(this).show();
182
-
183
- } else {
184
-
185
- $(this).hide();
186
-
187
- }
188
-
189
- });
123
+ 　　});
190
124
 
191
125
  });
192
126