我正在使用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 %}
如何更新我点击的按钮,而不是所有按钮?
答案 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)
$('.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');
}
}
})
});