jquery - 就像按钮一样，在数据库上添加和减去。 Nodejs、mongodb、 Mongoose 、jquery

Question

我正在建立一个用户可以喜欢的网站，“喜欢”按钮正在工作，它将喜欢存储在数据库中。我的问题是，如何让用户再次单击“喜欢”按钮时，它将在数据库中减去。我有一个喜欢按钮的动画，第一个默认状态是灰色，然后当用户单击它时，它会变成蓝色，旁边会出现“喜欢”文本。然后当用户再次点击时，它会变回黑色。

这是我在 POST 路由上的代码(因为我正在向数据库添加数据)

app.post("/index/:id", function(req,res){
    TestData.findById(req.params.id, function(err, theUser){
        if(err){
            console.log(err);
        } else {
            theUser.likes += 1;
            theUser.save();
            console.log(theUser.likes);
        }
    });
});

我的 EJS 文件:

      <a class="likeicon" href="/index/<%= newUsers._id %>?_method=POST">
       <i class="fa fa-thumbs-o-up" aria-hidden="true" ></i>
      </a>

和我的 jQuery:

$(".likeicon").on('click', function(){
if($(this).css("color") === "rgb(0, 0, 255)"){
  $("#likedtxt").remove();
  $(this).css("color", "black");
  $(this).animate({fontSize: "15px"});


} else {
  $(this).css("color", "blue");
  $(this).append("<span id='likedtxt'>Liked</span>");
  $(this).animate({fontSize: "18px"});
}  
});

还有一个问题，当我单击“喜欢”时，它会添加到数据库中，但是如何在用户屏幕上实时显示“喜欢”计数已更新？无需重新加载屏幕。因为我不想使用 res.redirect，它会刷新网页。

Answer 1

我认为你可以将 onclick 函数写入“likeicon”按钮

<a class="likeicon" userId="<%= newUsers._id %>" onclink="updateLikes()">
   <i class="fa fa-thumbs-o-up" aria-hidden="true" > 49 </i>
</a>

功能:

function updateLikes() {
    id = $('.likeicon').attr('userId');
    $.post('/index/' + id, function (response) {
        $('fa-thumbs-o-up').text(response.likeCount); //your counter on a page
        //and update likes counter with response
    })
}

和node.js

app.post("/index/:id", function (req, res) {
    TestData.findById(req.params.id, function (err, theUser) {
        if (err) {
            console.log(err);
        } else {
            theUser.likes += 1;
            theUser.save();
            console.log(theUser.likes);
            res.send({likeCount: theUser.likes}); //something like this...
        }
    });
});