※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。
「いいね」したらアイコンが切り替わるようにする
前回までで、「いいね」のデータベースを更新することができた
今回はデータベースだけじゃなく、アイコンも切り替わるようにする
active-heartを表示させたい
$('.inactive-heart').on('click', () => {
axios.post(`/articles/${articleId}/like`)
.then((response) => {
if (response.data.status === 'ok') {
$('.active-heart').removeClass('hidden')
$('.inactive-heart').addClass('hidden')
}
})
.catch((e) => {
window.alert('Error')
console.log(e)
})
})responseのstatusが'ok'だったら.active-heartからhiddenクラスをremove（削除）する.inactive-heartにhiddenクラスをadd（追加）する
inactive-heartを表示させたい
$('.active-heart').on('click', () => {
axios.delete(`/articles/${articleId}/like`)
.then((response) => {
if (response.data.status === 'ok') {
$('.active-heart').addClass('hidden')
$('.inactive-heart').removeClass('hidden')
}
})
.catch((e) => {
window.alert('Error')
console.log(e)
})
})responseのstatusが'ok'だったら.active-heartにhiddenクラスをadd（追加）する.inactive-heartからhiddenクラスをremove（削除）する
考え方をおさえる
やっていることは、jsonのデータをやりとりしているだけ（APIを使っているだけ）
- javascriptでサーバーにリクエストを送る
- jsonでresponseが返ってきたら表示を切り替える
これでページをリロードせず、画面はそのままで表示だけ切り替えられるようになった
#DAY6
