teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問お気に入り実装のやり方

編集履歴

質問編集履歴

1

内容の修正

2020/11/11 22:12

投稿

kensuzu5
kensuzu5

スコア2

test CHANGED
@@ -1 +1 @@
1
- flickrの画像表示のやり方
1
+ お気に入り実装のやり方
test CHANGED
@@ -1,16 +1,50 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- javascriptファイルから
3
+ お気に入りボタンのON,OFFの切り替えができるように設定をしたい。
4
4
 
5
+
6
+
7
+ ###質問内容
8
+
5
- flickrの犬と猫の画像を4枚ずつ表示ができるように設定を行っています。
9
+ お気に入りボタンのON,OFFの切り替えができるようにfa-starとfa-star-oの設定を行いました。
10
+
11
+ 実行結果は変化しなかったので何が原因か自分で調べましたが解決できませんでした。
12
+
13
+
14
+
15
+ アドバイスをお願いします。
16
+
17
+
18
+
19
+ ###発生している問題・エラーメッセージ
6
20
 
7
21
 
8
22
 
9
23
 
10
24
 
11
- ###質問内容
12
25
 
26
+
27
+ お気に入りリンクのアイコンを、塗りつぶしなし(fa-star-o) に変更する
28
+
29
+ $(`#messageId-${messageId}`).find("i").removeClass('fa-star');
30
+
31
+ $(`#messageId-${messageId}`).find("i").addClass('fa-star-o');
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
13
- 猫の画像と犬の画像を4枚ずつ表示させるにはどのように設定を行えばよいのかアドバイスをお願いします。
41
+ // お気に入りリンクのアイコンを、塗りつぶしあり(fa-star) に変更する
42
+
43
+ $(`#messageId-${messageId}`).find("i").removeClass('fa-star-o');
44
+
45
+ $(`#messageId-${messageId}`).find("i").addClass('fa-star');
46
+
47
+
14
48
 
15
49
 
16
50
 
@@ -20,78 +54,144 @@
20
54
 
21
55
  ###ソースコード
22
56
 
57
+ <HTML>
23
58
 
59
+ <div class="message__body">
24
60
 
25
- // リクエストパラメータを作る
61
+ <div class="message__user-name"></div>
26
62
 
27
- const parameterscat = $.param({
63
+ <div class="message__text"></div>
28
64
 
29
- method: 'flickr.photos.search',
65
+ <div class="message__info">
30
66
 
31
- api_key: apiKey,
67
+ <a href="#" class="message__favorite-link">
32
68
 
33
- text: 'cat', // 検索テキスト
69
+ <i class="message__favorite-icon fa fa-star-o"></i>
34
70
 
35
- sort: 'interestingness-desc', // 興味深さ順
71
+ </a>
36
72
 
37
- per_page: 8, // 取得件数
73
+ <span class="message__time"></span>
38
74
 
39
- license: '4', // Creative Commons Attributionのみ
75
+ </div>
40
76
 
41
- extras: 'owner_name,license', // 追加で取得する情報
77
+ </div>
42
78
 
43
- format: 'json', // レスポンスをJSON形式に
79
+ </div>
44
80
 
45
- nojsoncallback: 1, // レスポンスの先頭に関数呼び出しを含めない
81
+ <!-- /.message -->
46
82
 
47
- });
48
-
49
- const url = `https://api.flickr.com/services/rest/?${parameterscat}`;
50
-
51
- console.log(url);
83
+ </div>
52
84
 
53
85
 
54
86
 
55
- // 猫の画像を検索して表示
87
+ --------------------------------------------------------------------
56
88
 
57
- $.getJSON(url, (data) => {
89
+ <main.js>
58
90
 
91
+ */
92
+
93
+ favoritesRef.on('child_removed', (favSnapshot) => {
94
+
95
+ const messageId = favSnapshot.key;
96
+
97
+
98
+
99
+ // お気に入りが削除されていたら何もしない
100
+
101
+ if (!dbdata.favorites) {
102
+
103
+ return;
104
+
105
+ }
106
+
107
+
108
+
109
+ // TODO: 該当するデータをdbdata.favoritesから削除する
110
+
111
+
112
+
113
+ delete dbdata.favorites[messageId];
114
+
59
- console.log(data);
115
+ console.log('削除しました。');
60
116
 
61
117
 
62
118
 
63
-
119
+
64
120
 
65
- const parametersdog = $.param({
121
+ // お気に入り一覧モーダルから該当のお気に入り情報を削除する
66
122
 
67
- method: 'flickr.photos.search',
68
-
69
- api_key: apiKey,
70
-
71
- text: 'dog', // 検索テキスト
72
-
73
- sort: 'interestingness-desc', // 興味深さ順
123
+ $(`#favorite-message-id-${messageId}`).remove();
74
-
75
- per_page: 8, // 取得件数
76
-
77
- license: '4', // Creative Commons Attributionのみ
78
-
79
- extras: 'owner_name,license', // 追加で取得する情報
80
-
81
- format: 'json', // レスポンスをJSON形式に
82
-
83
- nojsoncallback: 1, // レスポンスの先頭に関数呼び出しを含めない
84
-
85
- });
86
-
87
- const url = `https://api.flickr.com/services/rest/?${parametersdog}`;
88
-
89
- console.log(url);
90
124
 
91
125
 
92
126
 
93
- // 猫の画像を検索して表示
94
127
 
95
- $.getJSON(url, (data) => {
96
128
 
129
+ // TODO: お気に入りリンクのアイコンを、塗りつぶしなし(fa-star-o) に変更する
130
+
131
+ $(`#messageId-${messageId}`).find("i").removeClass('fa-star');
132
+
133
+ $(`#messageId-${messageId}`).find("i").addClass('fa-star-o');
134
+
135
+
136
+
137
+ });
138
+
139
+
140
+
141
+ /**
142
+
143
+ * favorites の child_addedイベントハンドラを登録
144
+
145
+ *（お気に入りが追加されたときの処理）
146
+
147
+ */
148
+
149
+ favoritesRef.on('child_added', (favSnapshot) => {
150
+
151
+ const messageId = favSnapshot.key;
152
+
153
+ const favorite = favSnapshot.val();
154
+
155
+
156
+
157
+ if (!dbdata.favorites) {
158
+
159
+ // データを初期化する
160
+
161
+ dbdata.favorites = {};
162
+
163
+ }
164
+
165
+
166
+
167
+ // TODO: dbdata.favoritesに登録する
168
+
169
+ dbdata.favorites[messageId] =　favorite;
170
+
171
+
172
+
173
+
174
+
97
- console.log(data);
175
+ console.log(dbdata.favorites);
176
+
177
+
178
+
179
+
180
+
181
+ // お気に入り一覧モーダルを更新する
182
+
183
+ addFavoriteMessage(messageId, favorite.message);
184
+
185
+
186
+
187
+ // TODO: お気に入りリンクのアイコンを、塗りつぶしあり(fa-star) に変更する
188
+
189
+ $(`#messageId-${messageId}`).find("i").removeClass('fa-star-o');
190
+
191
+ $(`#messageId-${messageId}`).find("i").addClass('fa-star');
192
+
193
+
194
+
195
+ });
196
+
197
+ };