使用变量ID

时间:2016-12-22 19:38:01

标签: javascript html ajax thymeleaf

我正在设计一个具有时间线的社交网络,就像按钮一样。我使用AJAX在服务器端应用like按钮。问题是我想在成功之后立即更改每个帖子的喜欢数量。因为我的元素是由for-each生成的,所以我想改变确切元素的喜欢数量,我真的有问题。我正在使用百里香。

我正在寻找如何做到这一点的想法。

这是我的HTML代码:

<div class="col-sm-4">
   <div class="row" >
      <div class="col-sm-12">
      <img th:if="${tweet.isFavorited()}" src="../static/images/like.png" th:src="@{/images/like.png}" th:class="like-img" th:id="${tweet.getId()}"  width="35" height="35"/>
      <img th:if="${!tweet.isFavorited()}"  src="../static/images/dislike.png" th:src="@{/images/dislike.png}" th:class="like-img"  th:id="${tweet.getId()}"   width="35" height="35"/>
   </div>
</div>
<div class="row">
   <div class="col-sm-12" >
     <h6 th:if="${tweet.isRetweet()}" th:class="like-count" th:id="${tweet.getId()}"  th:text="${tweet.getRetweetedStatus().getFavoriteCount()}"></h6>
     <h6 th:if="${!tweet.isRetweet()}" th:class="like-count"  th:id="${tweet.getId()}"  th:text="${tweet.getFavoriteCount()}"></h6>
   </div>
</div>

这是我的脚本代码:

$(function () {
  $(".like-img").click(function () {    
    event.preventDefault();

    var $post = $(this);
    var toSend = {
        "tweetId": this.getAttribute("id")
    }

    $.ajax({
        type : "POST",
        contentType: "application/json; charset=utf-8",
        url : "like",
        data : JSON.stringify(toSend),
        dataType : 'json'
    }).done(function (data) {
        if(data.status == "success") {
            if ($($post).attr("src") == "/images/dislike.png") {
                $($post).attr('src','/images/like.png');
            }
            else {
                $($post).attr('src','/images/dislike.png');
            }

            return false;
        }
    });        
  });        
})

1 个答案:

答案 0 :(得分:0)

好的,为了使这项工作你需要为like-count元素分配唯一的id,如下所示:

<h6 th:if="${tweet.isRetweet()}" th:class="like-count" th:id="${tweet.getId()}_like_count"  th:text="${tweet.getRetweetedStatus().getFavoriteCount()}"></h6>

然后,您可以检索当前计数,增加它,并设置count元素的文本。像这样:

var currentCount = parseInt($('#'+toSend.tweetId+'_like_count').innerHtml)
var newCount = currentCount++;
$('#'+toSend.tweetId+'_like_count').text(newCount);