teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問続きを読むボタンが機能しない

編集履歴

質問編集履歴

5

あ

2021/05/26 05:18

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,10 @@
6
6
 
7
7
  // 修正：生jsでなく、jQueryに変更したところ、class .rr の追加までは上手くいき、ボタンをクリックして.rrのつけ外しができなくなりました。
8
8
 
9
+ //
10
+
11
+ 動きましたが、滑らかに動かしたいです。
12
+
9
13
 
10
14
 
11
15
  ### 発生している問題・エラーメッセージ
@@ -172,14 +176,28 @@
172
176
 
173
177
  c.removeClass('rr');
174
178
 
175
- $(this).text('close');
179
+ $(this).text('close').addClass('o');
176
180
 
177
181
  });
178
182
 
183
+ $(document).on('click', '.o', function() {
184
+
185
+ var c = $(this).parent('div');
186
+
187
+ c.addClass('rr');
188
+
189
+ $(this).text('more').removeClass('o');
190
+
191
+ });
192
+
179
193
  ```
180
194
 
181
195
  こちらに変更して、一回目のクリックイベントは発火しました。2回目はどう指定すればいいですか？
182
196
 
197
+ //
198
+
199
+ 2回目以降も発火しました。slideToggeleを使ったみたいになめらかに動かしたいのですが、どうすればよいでしょうか。
200
+
183
201
 
184
202
 
185
203
  ### 補足情報（FW/ツールのバージョンなど）

4

あ

2021/05/26 05:18

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -166,31 +166,19 @@
166
166
 
167
167
  ```js
168
168
 
169
- $('.more-button').on('click', function () {
169
+ $(document).on('click', '.more-button', function() {
170
170
 
171
- notr++;
171
+ var c = $(this).parent('div');
172
172
 
173
- var c = $(this).parent('.rr');
173
+ c.removeClass('rr');
174
174
 
175
- console.log(c)
176
-
177
- if (notr % 2 !== 0) {
178
-
179
- c.removeClass('rr');
180
-
181
- $(this).addClass('none');
175
+ $(this).text('close');
182
-
183
- } else {
184
-
185
- c.addClass('rr');
186
-
187
- }
188
176
 
189
177
  });
190
178
 
191
179
  ```
192
180
 
193
- ここが動かいみたいです。よくわからなくなってしまいました。
181
+ こちらに変更して、一回目のクリックイベントは発火しました。2回目はどう指定すればいいですか？
194
182
 
195
183
 
196
184
 

3

あ

2021/05/26 05:12

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -62,132 +62,132 @@
62
62
 
63
63
  }
64
64
 
65
- moreButton.on('click', function () {
65
+ $('.more-button').on('click', function () {
66
66
 
67
67
  notr++;
68
68
 
69
- var c = $(this).parent('div');
69
+ var c = $(this).parent('.rr');
70
70
 
71
71
  console.log(c)
72
72
 
73
73
  if (notr % 2 !== 0) {
74
74
 
75
+ c.removeClass('rr');
76
+
77
+ $(this).addClass('none');
78
+
79
+ } else {
80
+
75
81
  c.addClass('rr');
76
82
 
83
+ }
84
+
85
+ });
86
+
87
+ })
88
+
89
+ var exp = /(\b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
90
+
91
+ $('.room').html($(".room").html().replace(exp, "<a target=\"_blank\" class=\"icon-lnr icon-exit\" href='$1'>$1</a>"));
92
+
93
+ }
94
+
95
+ ```
96
+
97
+ ```html
98
+
99
+ <div class="section room">
100
+
101
+ <div>
102
+
103
+ <p><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
104
+
105
+ <div class="more-button">More</div>
106
+
107
+ </div>
108
+
109
+ <div>
110
+
111
+ <p><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
112
+
113
+ <div class="more-button">More</div>
114
+
115
+ </div>
116
+
117
+ <div>
118
+
119
+ <p><span>テスト</span>夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
120
+
121
+ <div class="more-button">More</div>
122
+
123
+ </div>
124
+
125
+ </div>
126
+
127
+ ```
128
+
129
+ ```css
130
+
131
+ .room > div p {
132
+
133
+ line-height: 1.8;
134
+
135
+ overflow: hidden;
136
+
137
+ }
138
+
139
+ .rr p {
140
+
141
+ display: -webkit-box;
142
+
143
+ -webkit-box-orient: vertical;
144
+
145
+ -webkit-line-clamp: 5;
146
+
147
+ }
148
+
149
+ .more-button {
150
+
151
+ text-align: right;
152
+
153
+ }
154
+
155
+ .more-button.none {
156
+
157
+ display: none;
158
+
159
+ }
160
+
161
+ ```
162
+
163
+
164
+
165
+ ### 試したこと
166
+
167
+ ```js
168
+
169
+ $('.more-button').on('click', function () {
170
+
171
+ notr++;
172
+
173
+ var c = $(this).parent('.rr');
174
+
175
+ console.log(c)
176
+
177
+ if (notr % 2 !== 0) {
178
+
179
+ c.removeClass('rr');
180
+
77
181
  $(this).addClass('none');
78
182
 
79
183
  } else {
80
184
 
81
- c.removeClass('rr');
185
+ c.addClass('rr');
82
186
 
83
187
  }
84
188
 
85
189
  });
86
190
 
87
- })
88
-
89
- var exp = /(\b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
90
-
91
- $('.room').html($(".room").html().replace(exp, "<a target=\"_blank\" class=\"icon-lnr icon-exit\" href='$1'>$1</a>"));
92
-
93
- }
94
-
95
- ```
96
-
97
- ```html
98
-
99
- <div class="section room">
100
-
101
- <div>
102
-
103
- <p><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
104
-
105
- <div class="more-button">More</div>
106
-
107
- </div>
108
-
109
- <div>
110
-
111
- <p><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
112
-
113
- <div class="more-button">More</div>
114
-
115
- </div>
116
-
117
- <div>
118
-
119
- <p><span>テスト</span>夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
120
-
121
- <div class="more-button">More</div>
122
-
123
- </div>
124
-
125
- </div>
126
-
127
- ```
128
-
129
- ```css
130
-
131
- .room > div p {
132
-
133
- line-height: 1.8;
134
-
135
- overflow: hidden;
136
-
137
- }
138
-
139
- .rr p {
140
-
141
- display: -webkit-box;
142
-
143
- -webkit-box-orient: vertical;
144
-
145
- -webkit-line-clamp: 5;
146
-
147
- }
148
-
149
- .more-button {
150
-
151
- text-align: right;
152
-
153
- }
154
-
155
- .more-button.none {
156
-
157
- display: none;
158
-
159
- }
160
-
161
- ```
162
-
163
-
164
-
165
- ### 試したこと
166
-
167
- ```js
168
-
169
- moreButton.on('click', function () {
170
-
171
- notr++;
172
-
173
- var c = $(this).parent('div');
174
-
175
- console.log(c)
176
-
177
- if (notr % 2 !== 0) {
178
-
179
- c.addClass('rr');
180
-
181
- $(this).addClass('none');
182
-
183
- } else {
184
-
185
- c.removeClass('rr');
186
-
187
- }
188
-
189
- });
190
-
191
191
  ```
192
192
 
193
193
  ここが動かいみたいです。よくわからなくなってしまいました。

2

あ

2021/05/26 04:53

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -162,6 +162,38 @@
162
162
 
163
163
 
164
164
 
165
+ ### 試したこと
166
+
167
+ ```js
168
+
169
+ moreButton.on('click', function () {
170
+
171
+ notr++;
172
+
173
+ var c = $(this).parent('div');
174
+
175
+ console.log(c)
176
+
177
+ if (notr % 2 !== 0) {
178
+
179
+ c.addClass('rr');
180
+
181
+ $(this).addClass('none');
182
+
183
+ } else {
184
+
185
+ c.removeClass('rr');
186
+
187
+ }
188
+
189
+ });
190
+
191
+ ```
192
+
193
+ ここが動かいみたいです。よくわからなくなってしまいました。
194
+
195
+
196
+
165
197
  ### 補足情報（FW/ツールのバージョンなど）
166
198
 
167
199
 

1

修正

2021/05/26 04:41

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -4,11 +4,17 @@
4
4
 
5
5
  複数行の記事を、5行を超えると自動で省略し、続きを読むボタンが表示されるようにしたいです。各ボタンで各記事が表示されるように for each を用いてみたところ、動かなくなってしまいました。
6
6
 
7
+ // 修正：生jsでなく、jQueryに変更したところ、class .rr の追加までは上手くいき、ボタンをクリックして.rrのつけ外しができなくなりました。
8
+
7
9
 
8
10
 
9
11
  ### 発生している問題・エラーメッセージ
10
12
 
11
13
  console.log(textContents.textContent); がそもそも取得できていないみたいです。jQueryの $('.room div').each(function () 内で $(this).find('.rp) を取得するような感じで、ネイティブで書きたかったのですがうまくいきませんでした。
14
+
15
+ //
16
+
17
+ console.log(c) が取得できていないみたいです。コンソールに表示されませんでした。
12
18
 
13
19
 
14
20
 
@@ -20,29 +26,23 @@
20
26
 
21
27
  if ($('.room > div').length) {
22
28
 
23
- var a = document.querySelector('.room div');
29
+ $('.room div').each(function () {
24
30
 
25
- for (var i = 0; i < a.length; i++) {
31
+ var b = $(this),
26
32
 
27
- var textContents = a[i].querySelector('.rp'),
33
+ textContents = b.find('p'),
28
34
 
29
- moreButton = a[i].querySelector('.more-button');
35
+ moreButton = b.find('.more-button');
30
36
 
31
- console.log(textContents.textContent);
37
+
32
-
33
-
34
38
 
35
39
  // テキスト要素の高さを取得
36
40
 
37
- var textHeight = textContents.clientHeight;
41
+ var textHeight = textContents.height();
38
42
 
39
43
  // テキスト要素のline-heightを取得
40
44
 
41
- var lineHeight = getComputedStyle(textContents).getPropertyValue('line-height');
45
+ var lineHeight = parseFloat($("body").css("line-height"));
42
-
43
- // [32.4px]のようなピクセル値が返ってくるので、数字だけにする
44
-
45
- lineHeight = lineHeight.replace(/[^-\d.]/g, '');
46
46
 
47
47
  console.log(lineHeight)
48
48
 
@@ -52,7 +52,7 @@
52
52
 
53
53
  if (textHeight > lineHeight * 5) {
54
54
 
55
- textContents.classList.add('r');
55
+ b.addClass('rr');
56
56
 
57
57
  } else {
58
58
 
@@ -62,13 +62,29 @@
62
62
 
63
63
  }
64
64
 
65
- moreButton.addEventListener('click', function () {
65
+ moreButton.on('click', function () {
66
66
 
67
+ notr++;
68
+
69
+ var c = $(this).parent('div');
70
+
71
+ console.log(c)
72
+
73
+ if (notr % 2 !== 0) {
74
+
75
+ c.addClass('rr');
76
+
77
+ $(this).addClass('none');
78
+
79
+ } else {
80
+
67
- textContents.classList.toggle('r');
81
+ c.removeClass('rr');
82
+
83
+ }
68
84
 
69
85
  });
70
86
 
71
- }
87
+ })
72
88
 
73
89
  var exp = /(\b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
74
90
 
@@ -84,7 +100,7 @@
84
100
 
85
101
  <div>
86
102
 
87
- <p class="rp"><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
103
+ <p><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
88
104
 
89
105
  <div class="more-button">More</div>
90
106
 
@@ -92,7 +108,7 @@
92
108
 
93
109
  <div>
94
110
 
95
- <p class="rp"><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
111
+ <p><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
96
112
 
97
113
  <div class="more-button">More</div>
98
114
 
@@ -100,7 +116,7 @@
100
116
 
101
117
  <div>
102
118
 
103
- <p class="rp"><span>テスト</span>夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
119
+ <p><span>テスト</span>夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
104
120
 
105
121
  <div class="more-button">More</div>
106
122
 
@@ -112,7 +128,7 @@
112
128
 
113
129
  ```css
114
130
 
115
- .rp {
131
+ .room > div p {
116
132
 
117
133
  line-height: 1.8;
118
134
 
@@ -120,13 +136,19 @@
120
136
 
121
137
  }
122
138
 
123
- .rp.r {
139
+ .rr p {
124
140
 
125
141
  display: -webkit-box;
126
142
 
127
143
  -webkit-box-orient: vertical;
128
144
 
129
145
  -webkit-line-clamp: 5;
146
+
147
+ }
148
+
149
+ .more-button {
150
+
151
+ text-align: right;
130
152
 
131
153
  }
132
154