Laravel投稿サイト構築.84 -いいね機能の実装.4（いいね切替）-

前回

いいねボタンを押したら、非同期でいいねテーブルにいいね情報を登録する。

解除はまだできない。

bladeファイル修正
js ファイル修正
動作確認

bladeファイル修正

-----

@if( $thread->isLike($thread->thread_id) )
{{-- いいね済 --}}
<a class="toggle_like" thread_id="{{$thread->thread_id}}" like_val="1"><img src="{{ asset('image\like_on.svg') }}" class="icon_like" /></a>
@else
{{-- いいね未 --}}
<a class="toggle_like" thread_id="{{$thread->thread_id}}" like_val="0"><img src="{{ asset('image\like_off.svg') }}" class="icon_like" /></a>
@endif

-----

toggle_likeクラスのコントロールのクリックイベントを作成する。
書き込みIDや選択状態を関数の引数でなく属性で持たせる。

js ファイル修正

-----

$('.toggle_like').on('click', function ()
{
//表示しているプロダクトのIDと状態、押下し他ボタンの情報を取得
var thread_id = $(this).attr("thread_id");
var like_val = $(this).attr("like_val");
var button = $(this);

if(like_val == '1'){

$.ajax({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
type: 'POST',
url: `/unlike_theme/`+thread_id,
}).done(function(data, status, xhr) {
// 成功時の処理
button.attr('like_val', '0');
button.children().attr('src', '/image/like_off.svg');
console.log(data);

}).fail(function(xhr, status, error) {
// 失敗時の処理
console.log();
});

} else {

$.ajax({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
type: 'POST',
url: `/like_theme/`+thread_id,
}).done(function(data, status, xhr) {
// 成功時の処理
button.attr('like_val', '1');
button.children().attr('src', '/image/like_on.svg');
console.log(data);

}).fail(function(xhr, status, error) {
// 失敗時の処理
console.log();
});
}
});

-----

コントロールファイル、モデルは特に変更なし