teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

6

質問の追記

2021/02/07 03:26

投稿

Autophagy______
Autophagy______

スコア0

title CHANGED
File without changes
body CHANGED
@@ -13,6 +13,10 @@
13
13
  これを解決するためには
14
14
  article.jsにどのようなコードを書けばいいでしょうか?
15
15
 
16
+ (ちなみに document.addEventListener('DOMContentLoaded', () => {})
17
+ で囲まれた処理は最初に読み込まれる10記事にしか実行されません。)
18
+
19
+
16
20
  ```javascript
17
21
  $(function(){
18
22
  $(window).on('scroll', function (){

5

不足していた情報を追記しました。

2021/02/07 03:26

投稿

Autophagy______
Autophagy______

スコア0

title CHANGED
File without changes
body CHANGED
@@ -7,13 +7,49 @@
7
7
  その時に、新しい記事が読み込まれるたびに
8
8
  記事(article)についているハートの表示を
9
9
  切り替える処理をjavascriptで行いたいのですが、
10
- 現在のコードだと処理が数1000回実行されてしまって
10
+ 現在のコードだと下記の処理が数1000回実行されてしまって
11
11
  エラーが発生したり処理が重くなってしまいます。
12
12
 
13
13
  これを解決するためには
14
14
  article.jsにどのようなコードを書けばいいでしょうか?
15
15
 
16
+ ```javascript
17
+ $(function(){
18
+ $(window).on('scroll', function (){
19
+ var scroll = $(window).scrollTop();
20
+ if (scroll % 30 < 1){
16
21
 
22
+ // ロード時にいいねされていないハートを配列で取得
23
+ $('.inactive-heart').each(function (index, element) {
24
+ const likeData = $(element).data()
25
+ const articleId = likeData.articleId
26
+ axios.get(`/articles/${articleId}/like`)
27
+ .then((response) => {
28
+ const inActiveStatus = response.data.hasLiked
29
+ if ( inActiveStatus === false ) {
30
+ $(element).removeClass('hidden')
31
+ }
32
+ })
33
+ })
34
+
35
+ // ロード時にいいねされているハートを配列で取得
36
+ $('.active-heart').each(function (index, element) {
37
+ const likeData = $(element).data()
38
+ const articleId = likeData.articleId
39
+ axios.get(`/articles/${articleId}/like`)
40
+ .then((response) => {
41
+ const activeStatus = response.data.hasLiked
42
+ if ( activeStatus === true) {
43
+ $(element).removeClass('hidden')
44
+ }
45
+ })
46
+ })
47
+ }
48
+ });
49
+ });
50
+ ```
51
+
52
+
17
53
  ### 発生している問題・エラーメッセージ
18
54
 
19
55
 
@@ -154,10 +190,7 @@
154
190
 
155
191
  $(function(){
156
192
  $(window).on('scroll', function (){
157
- //$(".article").each(function(){
158
- // var ePos = $(this).offset().top;
159
193
  var scroll = $(window).scrollTop();
160
- // var windowHeight = $(window).height();
161
194
  if (scroll % 30 < 1){
162
195
 
163
196
  $('.inactive-heart').each(function (index, element) {
@@ -184,9 +217,7 @@
184
217
  }
185
218
  })
186
219
  })
187
-
188
220
  }
189
- // });
190
221
  });
191
222
  });
192
223
  ```

4

追記

2021/02/07 03:19

投稿

Autophagy______
Autophagy______

スコア0

title CHANGED
File without changes
body CHANGED
@@ -240,4 +240,15 @@
240
240
 
241
241
  setIntervalで一定時間置きに処理するようにしてみましたが
242
242
  同じように「Failed to load resource: net::ERR_INSUFFICIENT_RESOURCES」
243
- が出てしまいました。
243
+ が出てしまいました。
244
+
245
+ また、ハートが両方ともhiddenだったら処理が行われるように
246
+ 以下のようにコードを書きましたが
247
+ 新しく記事が読み込まれても反応せず。
248
+ ```
249
+ $(function(){
250
+ $(window).on('scroll', function (){
251
+ $(".article").each(function () {
252
+ if ($('.article').find('.active-heart').css('display') == 'none' && $('.article').find('.inactive-heart').css('display') == 'none') {
253
+ ```
254
+ 途方にくれております。

3

修正

2021/02/06 12:36

投稿

Autophagy______
Autophagy______

スコア0

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- インスタグラム風のアプリを作っています。
3
+ Railsでインスタグラム風のアプリを作っています。
4
4
  無限スクロール(InfiniteScroll)を使って
5
5
  記事が10記事ずつ読み込まれるようにしています。
6
6
 

2

改行

2021/02/06 08:08

投稿

Autophagy______
Autophagy______

スコア0

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,12 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
3
  インスタグラム風のアプリを作っています。
4
- 無限スクロール(InfiniteScroll)を使って記事が10記事ずつ読み込まれるようにしています。
4
+ 無限スクロール(InfiniteScroll)を使って
5
+ 記事が10記事ずつ読み込まれるようにしています。
5
6
 
6
7
  その時に、新しい記事が読み込まれるたびに
8
+ 記事(article)についているハートの表示を
7
- 記事(article)についているハートの表示を切り替える処理をjavascriptで行いたいのですが
9
+ 切り替える処理をjavascriptで行いたいのですが
8
10
  現在のコードだと処理が数1000回実行されてしまって
9
11
  エラーが発生したり処理が重くなってしまいます。
10
12
 

1

改行

2021/02/06 07:04

投稿

Autophagy______
Autophagy______

スコア0

title CHANGED
File without changes
body CHANGED
@@ -7,6 +7,7 @@
7
7
  記事(article)についているハートの表示を切り替える処理をjavascriptで行いたいのですが
8
8
  現在のコードだと処理が数1000回実行されてしまって
9
9
  エラーが発生したり処理が重くなってしまいます。
10
+
10
11
  これを解決するためには
11
12
  article.jsにどのようなコードを書けばいいでしょうか?
12
13