喜欢/不喜欢功能答案

【问题标题】：Like/Dislike function喜欢/不喜欢功能
【发布时间】：2017-12-26 08:28:02
【问题描述】：

我有一个喜欢和不喜欢评论的 ajax 功能，但是有了这个功能，我可以同时喜欢和不喜欢。例如，当我喜欢评论时，它就是喜欢它，如果在那之后我不喜欢它，它也会这样做，而不会删除我的喜欢。

这是喜欢（upvote）和不喜欢（downvote）的代码

赞成票

$(".tup").click(function (e) {

    e.preventDefault();
    var reviewId = $(this).data('id');

    $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: document.location.origin + '/review/' + reviewId + '/upvote',
            type: 'POST',
            data: {
                review_id: reviewId
            },
            dataType: 'json'
        })
        .done(function (data) {

            if (data == true) {
                $('.tup[data-id=' + reviewId + '] .vn').text(function (i, oldVal)
                 {
                    return parseInt(oldVal, 10) + 1;
                });
            } else {
                snackybar.timer("Already Voted", 3000);
            }

        })
        .fail(function (jqXHR, textStatus) {
            console.log("Request failed: " + textStatus);
        });
});

// down votes

$(".tdown").click(function (e) {
    e.preventDefault();
    var reviewId = $(this).data('id');

    $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: document.location.origin + '/review/' + reviewId + '/downvote',
            type: 'POST',
            data: {
                review_id: reviewId
            },
            dataType: 'json'
        })
        .done(function (data) {
            if (data == true) {
                $('.tdown[data-id=' + reviewId + '] .vn').text(function (i, oldVal) {
                    return parseInt(oldVal, 10)  + 1;
                });
            } else {
                snackybar.timer("Already Voted", 3000);
            }
        })
        .fail(function (jqXHR, textStatus) {
            console.log("Request failed: " + textStatus);
        });
});

这是控制器的代码

 public function upvote($id) {
    if(!UpDownVote::where('review_id',$id)->where('upvote',1)->first()) {
        Review::findOrFail($id)->increment('upvote');
        UpDownVote::create([
            'user_id' => Auth::user()->id,
            'review_id' => $id,
            'upvote' => 1
        ]);
        return 'true';
    } else {
        return 'false';
    }
}

public function downvote($id) {
    if(!UpDownVote::where('review_id',$id)->where('downvote',1)->first()) {
        Review::findOrFail($id)->increment('downvote');
        UpDownVote::create([
            'user_id' => Auth::user()->id,
            'review_id' => $id,
            'downvote' => 1
        ]);
        return 'true';
    } else {
        return 'false';
    }
}

【问题讨论】：

您遇到的错误是什么？
当我喜欢评论时它会这样做，之后如果我不喜欢它（按下大拇指）它也会这样做，这意味着我可以同时喜欢和不喜欢评论
请也发布您的 HTML 代码

标签： javascript php jquery ajax laravel-5

【解决方案1】：

问题在于您的 Ajax 调用是异步的；因此，当单击tup 按钮，然后单击tdown 一个时，可能在单击第二个按钮时尚未完成处理。

您可以在等待服务器响应时禁用点击的可能性。

var isClicking = false;
$(".tup").click(function (e) {
if(isClicking){
   return;
}
isClicking = true;
e.preventDefault();
var reviewId = $(this).data('id');

$.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: document.location.origin + '/review/' + reviewId + '/upvote',
        type: 'POST',
        data: {
            review_id: reviewId
        },
        dataType: 'json'
    })
    .done(function (data) {

        if (data == true) {
            $('.tup[data-id=' + reviewId + '] .vn').text(function (i, oldVal)
             {
                return parseInt(oldVal, 10) + 1;
            });
        } else {
            snackybar.timer("Already Voted", 3000);
        }

    })
    .fail(function (jqXHR, textStatus) {
        console.log("Request failed: " + textStatus);
    }).always(function(){
     isClicking=false;
  });
});

// down votes




 $(".tdown").click(function (e) {
e.preventDefault();
if(isClicking){
   return;
}
isClicking = true;
var reviewId = $(this).data('id');

$.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: document.location.origin + '/review/' + reviewId + '/downvote',
        type: 'POST',
        data: {
            review_id: reviewId
        },
        dataType: 'json'
    })
    .done(function (data) {
        if (data == true) {
            $('.tdown[data-id=' + reviewId + '] .vn').text(function (i, oldVal) {
                return parseInt(oldVal, 10)  + 1;
            });
        } else {
            snackybar.timer("Already Voted", 3000);
        }
    })
    .fail(function (jqXHR, textStatus) {
        console.log("Request failed: " + textStatus);
    }).always(function(){
     isClicking=false;
  });
});

【讨论】：