お気に入りアイコンの実装

前提・実現したいこと

firebaseのお気に入りボタンのon,offを切り替えたい。

発生している問題・エラーメッセージ

お気に入りアイコンのonはできる様になったのですが常時onになってしまいoffの仕方が分かりません。
切り替えるために必要なことを教えて欲しいです。

該当のソースコード

Firebase
1if (dbdata.favorites && dbdata.favorites[messageId]) {
2    const favorites = {
3      uid: currentUID,
4      text: message.text,
5      time: firebase.database.ServerValue.TIMESTAMP,
6    };
7    firebase
8      .database()
9      .ref(`favorites/${messageId}`)
10      .remove();
11    console.log('データを削除しました');
12  } else {
13    firebase
14      .database()
15      .ref(`favorites/${currentUID}/${messageId}`)
16      .set({
17        message,
18        createdAt: firebase.database.ServerValue.TIMESTAMP,
19      });
20  }
21favoritesRef.on('child_removed', (favSnapshot) => {
22    const messageId = favSnapshot.key;
23
24    if (!dbdata.favorites) {
25      return;
26    }
27    delete dbdata.favorites[messageId];
28    $(`#favorite-message-id-${messageId}`).remove();
29
30    if (dbdata.favorites && dbdata.favorites[messageId]) {
31      $(`#${messageId}`).find('i').removeClass('fa-star-o');
32      $(`#${messageId}`).find('i').addClass('fa-star');
33    }
34
35    $(`#${messageId}`).find("i").removeClass('fa-star');
36    $(`#${messageId}`).find("i").addClass('fa-star-o');
37　　
38    $(`#${messageId}`).find("i").removeClass('fa-star-o');
39    $(`#${messageId}`).find("i").addClass('fa-star');
40  });
41

HTML
1<div class="message__body">
2        <div class="message__user-name"></div>
3        <div class="message__text"></div>
4        <div class="message__info">
5          <a href="#" class="message__favorite-link">
6            <i class="message__favorite-icon fa fa-star-o"></i>
7          </a>
8          <span class="message__time"></span>
9        </div>
10      </div>

＃試したこと
if文にelseを作りoffにしようとしたが変化は見られませんでした。

行動規範の内容に同意します

回答1件

自己解決

$(#message-id-${messageId}).find("i").removeClass('fa-star-o');
$(#message-id-${messageId}).find("i").addClass('fa-star');
上記の様にすれば切り替えができる様になりました。

投稿2020/10/13 11:01

natu494

総合スコア6