前提・実現したいこと
お気に入りボタンのON,OFFの切り替えができるように設定をしたい。
###質問内容
お気に入りボタンのON,OFFの切り替えができるようにfa-starとfa-star-oの設定を行いました。
実行結果は変化しなかったので何が原因か自分で調べましたが解決できませんでした。
アドバイスをお願いします。
###発生している問題・エラーメッセージ
お気に入りリンクのアイコンを、塗りつぶしなし(fa-star-o) に変更する
$(#messageId-${messageId}
).find("i").removeClass('fa-star');
$(#messageId-${messageId}
).find("i").addClass('fa-star-o');
// お気に入りリンクのアイコンを、塗りつぶしあり(fa-star) に変更する
$(#messageId-${messageId}
).find("i").removeClass('fa-star-o');
$(#messageId-${messageId}
).find("i").addClass('fa-star');
###ソースコード
<HTML> <div class="message__body"> <div class="message__user-name"></div> <div class="message__text"></div> <div class="message__info"> <a href="#" class="message__favorite-link"> <i class="message__favorite-icon fa fa-star-o"></i> </a> <span class="message__time"></span> </div> </div> </div> <!-- /.message --> </div><main.js>
*/
favoritesRef.on('child_removed', (favSnapshot) => {
const messageId = favSnapshot.key;
// お気に入りが削除されていたら何もしない if (!dbdata.favorites) { return; } // TODO: 該当するデータをdbdata.favoritesから削除する delete dbdata.favorites[messageId]; console.log('削除しました。'); // お気に入り一覧モーダルから該当のお気に入り情報を削除する $(`#favorite-message-id-${messageId}`).remove(); // TODO: お気に入りリンクのアイコンを、塗りつぶしなし(fa-star-o) に変更する $(`#messageId-${messageId}`).find("i").removeClass('fa-star'); $(`#messageId-${messageId}`).find("i").addClass('fa-star-o');
});
/**
- favorites の child_addedイベントハンドラを登録
*(お気に入りが追加されたときの処理)
*/
favoritesRef.on('child_added', (favSnapshot) => {
const messageId = favSnapshot.key;
const favorite = favSnapshot.val();
if (!dbdata.favorites) { // データを初期化する dbdata.favorites = {}; } // TODO: dbdata.favoritesに登録する
dbdata.favorites[messageId] = favorite;
console.log(dbdata.favorites);
// お気に入り一覧モーダルを更新する addFavoriteMessage(messageId, favorite.message); // TODO: お気に入りリンクのアイコンを、塗りつぶしあり(fa-star) に変更する $(`#messageId-${messageId}`).find("i").removeClass('fa-star-o'); $(`#messageId-${messageId}`).find("i").addClass('fa-star');
});
};
回答1件
あなたの回答
tips
プレビュー