当点击喜欢按钮时，使用 ajax 更改磁带中帖子的点赞数答案

【问题标题】：Change number of likes for post in tape with ajax, when click like button当点击喜欢按钮时，使用 ajax 更改磁带中帖子的点赞数
【发布时间】：2021-02-01 22:07:51
【问题描述】：

我正在使用 Yii2 框架，现在我希望通过 Ajax 点击赞按钮成功时更改帖子的赞数。现在我刷新页面，点赞数发生变化。

我的 Ajax 按钮喜欢：

$(document).on('click','.like-btn',function(e){
    event.preventDefault();
    var self = $(this);
    $.ajax({
        url: '/site/like',
        type: 'POST',
        data: {
            'id': self.attr('data-id'),
            'type': self.attr('data-type')
        },
        success: function (data){
            if (data.status == 403){
                $('#login').modal('show');
            } else if (data.status == 200){
                if (data.code == 1){
                    let attrCurrent = $("[data-id ="+self.attr('data-id')+"]"+"[data-type ="+self.attr('data-type')+"]");
                    attrCurrent.addClass('liked');
                } else if (data.code == 2) {
                    let attrCurrent = $("[data-id ="+self.attr('data-id')+"]"+"[data-type ="+self.attr('data-type')+"]");
                    attrCurrent.removeClass('liked')
                }
            }
        }
    });

例如像这样的按钮：

<div class="box-content box-blog-news">
    <div class="row show_here ">
        <?php foreach ($blog as $value): ?>
        <div class="col-lg-4 col-sm-6 mt-10 mb-10">
            <div class="item-blog-news mb-0">
                <div class="images images-form">
                    <div class="img-item">
                        <div class="img-item"><img ... ></div>
                    </div>
                    <?=LikeArticleWidget::widget([ 'article_id'=> $value->id, 'type' => ArticleLike::TYPE_LIKE_BLOG, 'user_id' => ArticleLike::isLikedBlog(Yii::$app->user->id, $value->id)]); ?>
                </div>
                ...
                <ul class="box-active flex">
                    <li><span class="icon-default icon-heart-2"></span> (
                        <?=$ value->getLike()->count() ?>)
                    </li>
                </ul>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>

类似组件：

<div class="box-like box-like-nobg like-btn <?= $user_id ? 'liked' : 'like' ?>"
     data-id="<?= $article_id ?>"
     data-type="<?= $type ?>"></div>

【问题讨论】：

嗨也可以显示like-btn html 吗？
@Swati 我已经更新了。
所以<ul class="box-active flex">.. 在那个喜欢的 div 里面？请显示正确的html代码
@Swati

标签： php ajax

【解决方案1】：

我仍然不确定您的 html 结构，但您只需要获取总计数值，然后使用此值 add 1 或 subtract 1 并在您的 li 标记内更新相同的值。

演示代码：

var data = {
  "code": 1
} //jus for demo...
$(document).on('click', '.like-btn', function(e) {
  event.preventDefault();
  var self = $(this);
  /* $.ajax({
     your ajax code//
     
     */
  //get like count ..
  var likes = parseInt(self.closest(".item-blog-news").find("li").clone().children().remove().end().text().replace(/[()]/g, '').trim())
  if (data.code == 1) {
    let attrCurrent = $("[data-id =" + self.attr('data-id') + "]" + "[data-type =" + self.attr('data-type') + "]");
    attrCurrent.addClass('liked');
    //access li where total count is add 1 to total number.. change icon class.as well..
    self.closest(".item-blog-news").find("li").html("<span class='icon-default icon-heart'></span> (" + (likes + 1) + ")");
  } else if (data.code == 2) {
    let attrCurrent = $("[data-id =" + self.attr('data-id') + "]" + "[data-type =" + self.attr('data-type') + "]");
    attrCurrent.removeClass('liked')
    //access li where total count is sub 1 to total number..
    self.closest(".item-blog-news").find("li").html("<span class='icon-default icon-heart'></span>(" + (likes - 1) + ")");
  }

  /* }
    }
  });*/

})

.liked {
  color: red
}

li {
  list-style: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<div class="box-content box-blog-news">
  <div class="row show_here ">

    <div class="col-lg-4 col-sm-6 mt-10 mb-10">
      <div class="item-blog-news mb-0">
        <div class="images images-form">
          <div class="img-item">
            <div class="img-item"><img ...></div>
          </div>
          <div class="box-like box-like-nobg like-btn <?= $user_id ? 'liked' : 'like' ?>" data-id="1" data-type="something">Like</div>
        </div>
        ...
        <ul class="box-active flex">
          <li><span class="icon-default icon-heart"></span> (24)
          </li>
        </ul>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 mt-10 mb-10">
      <div class="item-blog-news mb-0">
        <div class="images images-form">
          <div class="img-item">
            <div class="img-item"><img ...></div>
          </div>
          <div class="box-like box-like-nobg like-btn <?= $user_id ? 'liked' : 'like' ?>" data-id="2" data-type="something">Like</div>
        </div>
        ...
        <ul class="box-active flex">
          <li><span class="icon-default icon-heart"></span> (23)
          </li>
        </ul>
      </div>
    </div>

  </div>
</div>

【讨论】：