如何正确增加好恶答案

【问题标题】：How to increase likes & dislike properly如何正确增加好恶
【发布时间】：2016-10-13 15:27:52
【问题描述】：

我在每个帖子上都有一个按钮

1) 点赞按钮

如果用户已经喜欢该帖子，则显示不同按钮

如果用户不喜欢这篇文章，这里是 HTML 部分

<a href="javascript:void(0);" id="liker" data-count="0" data-fpc="481" data-id="cDJod1RnUU45eXBQWmp">Like</a>

如果用户已经喜欢该帖子

<a href="javascript:void(0);" id="unliker" data-count="1" data-fpc="481" data-id="cDJod1RnUU45eXBQWmp">Unlike</a>

这里是jquery部分，这部分发送like request

$(function() {
    $("body").on("click", "#liker", function() {
        var t = $(this).data("id"),
            a = $(this).data("count"),
            f = $(this).data("fpc");
        a++;
        $("#cyli" + f).text(a);
        $(this).attr('id', 'unliker');
        $(this).data('count', a);
        $(this).text('Unlike');
        i = this, $.ajax({
            type: "POST",
            url: "/ajax/liker?io=" + t,
            data: "id=" + t,
            success: function(t) {}
        })
    });
});

以下部分发送不同的请求

$(function() {
    $("body").on("click", "#unliker", function() {
        var t = $(this).data("id"),
            a = $(this).data("count"),
            f = $(this).data("fpc");
        a -= 1;
        $("#cyli" + f).text(a);
        $(this).attr("id", "liker");
        $(this).data('count', a);
        $(this).text("Like");
        i = this, $.ajax({
            type: "POST",
            url: "/ajax/unliker?io=" + t,
            data: "id=" + t,
            success: function(t) {}
        })
    });
});

喜欢的值显示在这个标签<i class="fa fa-thumbs-up" id="cyli481" aria-hidden="true">&nbsp; 0</i>

现在的问题是当我点击喜欢或不喜欢时，值没有正确添加或扣除。

例如，如果 data-count="0" 这意味着这篇文章中没有类似的内容，但是当我点击它时，它会自动变为 2，然后如果我点击不同的按钮，它就会变为 -1，上面的方法可能有问题

【问题讨论】：

为什么不简单地将a++ & a-=1 替换为a=1 & a=0 ？它并不完美，它不能回答你的问题，但它确实解决了问题

标签： javascript php jquery

【解决方案1】：

如果您只需将$(this).data("count") 和$(this).data("count", a) 更改为$(this).attr("data-count") 和$(this).attr("data-count", a)，它就可以工作。

试试这个代码：

$(function() {
    $("body").on("click", "#liker", function() {
        var t = $(this).data("id"),
            a = $(this).attr("data-count"),
            f = $(this).data("fpc");
        a++;
        $("#cyli" + f).text(a);
        $(this).attr('id', 'unliker');
        $(this).attr('data-count', a);
        $(this).text('Unlike');
        i = this, $.ajax({
            type: "POST",
            url: "/ajax/liker?io=" + t,
            data: "id=" + t,
            success: function(t) {}
        })
    });
});
$(function() {
    $("body").on("click", "#unliker", function() {
        var t = $(this).data("id"),
            a = $(this).attr("data-count"),
            f = $(this).data("fpc");
        a -= 1;
        $("#cyli" + f).text(a);
        $(this).attr("id", "liker");
        $(this).attr('data-count', a);
        $(this).text("Like");
        i = this, $.ajax({
            type: "POST",
            url: "/ajax/unliker?io=" + t,
            data: "id=" + t,
            success: function(t) {}
        })
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:void(0);" id="liker" data-count="0" data-fpc="481" data-id="cDJod1RnUU45eXBQWmp">Like</a>
<i class="fa fa-thumbs-up" id="cyli481" aria-hidden="true">&nbsp; 0</i>

【讨论】：