没有页面刷新更新Like按钮

时间:2017-11-26 11:03:38

标签: javascript jquery ajax

我正在使用Like按钮。它工作正常。在Like按钮完成它的功能之后,我正在尝试更新按钮文本(喜欢喜欢)而不刷新页面,但问题是它正在更新网页上的每个Like按钮(直到我刷新页面)而不仅仅是一个我点击了。 。

这是AJAX调用中的成功函数,

$('.like-click').click(function(e){
e.preventDefault();

var this_ = $(this);
var quesURL = this_.attr('like-href');
$.ajax({
    url: quesURL,
    method: 'GET',
    data: {},
    success: function (data) {
        var like_text = $(data).find('.like-click').html();
        $('.like-click').html(like_text);
    }
})
});

这是HTML代码,

{% for data in datas %}
     ...
     <a class="like-click" like-href="...">{% if user in Likes %}Liked{% else %}Like{% endif %}</a>
     ...
{% endfor %}

如何更新我点击的按钮,而不是所有按钮?

3 个答案:

答案 0 :(得分:1)

您已将已点击的元素保存在var this_中,因此您只需更换$(&#39; .like-click&#39;)。html(like_text); to $(this _)。html(like_text);

因此它不会更新每个按钮文本。

答案 1 :(得分:0)

为什么要使用AJAX?你没有从数据库中拉出“赞”或“喜欢”。用简单的处理程序做到:

$(function(){
    $('button').click(
       function(){
         $(".button div").toggle();
       }
    )
});


<button type="button" class="button like-click">
  <div>Like</div>
  <div style="display: none">Liked</div>
</button>

请注意,按class="like-click"选择按钮/元素可能不是您需要的(它会影响该类的所有元素),因此更好地将它们作为唯一的来自您的{{1循环

更新:

因为你不喜欢,所以可以用与上面例子相同的方式完成:

{% for data in datas %}

答案 2 :(得分:0)

发生这种情况是因为你点击了所有按钮并点击了&#39;类

$('.like-click').click(function(e){
e.preventDefault();
var this_ = $(this);
var quesURL = this_.attr('like-href');
$.ajax({
   url: quesURL,
   method: 'GET',
   data: {},
   success: function (data) {
    if(this_.html()=='like'){
      this_.html('liked');
    }else{
      this_.html('like'); 
    }
   }
})
});