Jquery ajax 喜欢和不喜欢按钮答案

【问题标题】：Jquery ajax like and dislike buttonJquery ajax 喜欢和不喜欢按钮
【发布时间】：2016-04-04 08:52:16
【问题描述】：

伙计们正在尝试在 fb 上创建喜欢和不喜欢的按钮。我有我在 PHP 中列出循环的帖子列表。如果喜欢设置蓝色，我只想要一个按钮，如果不喜欢设置正常（默认）颜色。所有喜欢的记录都存储在数据库中 标识 | account_id | item_id |等等。

我有一个用于喜欢的 php 控制器，它包含 2 个主要方法 addAction() 和 deleteAction() 。第一个和第二个动作只接受ajax请求并在数据库中添加和删除记录。

所以我的问题是，当我单击 ajax 完成（成功并完成）时，一个按钮的颜色没有改变。我想我做得很好，但方法不对。什么时候我单击喜欢记录已保存，但实时颜色已更改。我也尝试使用 Jquery load() 但我只能加载所有帖子，并且在 setInterval 之后他将我返回到帖子列表的顶部：/

这是我的 jquery：

// Submit post like
submitPostLike: function() {

    var likes = 0;
    var likeBtn = $(".like-btn");

    likeBtn.click(function() {

         var postId = $(this).attr("rel");

        $.ajax({
             type: "post",
             cache: false,
             url: baseurl + "/like/addAction",
             data: {
                 item_id: postId,
             },
             success: function(response) {
                 console.log("post liked -" + postId); // debug
             },
            complete: function() {
                $(".like-txt").css("color", "blue");
                setTimeout(Post.updatePostList(), 1000);
                console.log("scheduler fired"); // debug
            },
             error: function(response, s, e) {
                alert(response.responseText);
             },
         });
     })
},

Delete Action 是一些我不放的。

在 php 中循环创建的 HTML

<?php if(hasLiked($post->post_id, $acc_id)): ?>
     <button type="button" id="post_like_btn" rel="<?= $post->post_id;?>" class="dislike-btn btn btn-xs btn-default">
     <div class="like-txt"><i class="glyphicon glyphicon-thumbs-up"></i> Like </div>
     </button>
<?php else : ?>
   <button type="button" id="post_dislike_btn" rel="<?= $post->post_id;?>" class="like-btn btn btn-xs btn-default">
  <i class="like glyphicon glyphicon-thumbs-up"></i> Dislike
  </button>
<?php endif; ?>

hasLiked() 是 php 函数，用于检查该帖子是否已被此帐户喜欢。如果 db 中存在喜欢的帐户，则显示不喜欢按钮。

现在当有人喜欢发帖时，如何使用 load() 函数进行实时刷新？所有这些都有效，但只有当我刷新页面时，文本才会变成蓝色。

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

HTML 正在服务器端处理并提供给客户端。如果 hasLiked 返回 false，则具有类 like-txt 的 div 将不会出现在提供的 HTML 中。因此，当您尝试在 Ajax 调用的 complete 方法中访问它时，什么也没有发生。无论hasLiked 返回的值是否为假，您都需要使元素出现在 Dom 中。你可以隐藏它，但它必须是 Dom 的一部分。

【讨论】：