我将按钮颜色存储在cookie中,因此,如果在页面刷新后单击按钮,css颜色会保留,但是第二次单击后我不知道如何销毁cookie,因此如果用户再次单击按钮,颜色恢复为原始颜色,我使用jquery cookie插件
jquery:
var color = Cookies.get('color')
console.log(color)
if(color)
$('.likes-button').addClass(color)
Cookies.remove('color')
$('.likes-button').click(function(){
var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
var el= this;
var ajaxdata = $(this).attr('data-id');
var ajaxstring = $(this).attr('string');
console.log(ajaxstring)
$.ajax({
type: "POST",
url: '/ajax/upvote/',
data: JSON.stringify({'product_id' : ajaxdata,'string': ajaxstring}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
"X-CSRFToken": csrftoken
},
success: function(response) {
var up = response['likes']
var string = response['string']
console.log(string);
console.log(up)
$(el).find('.target').html(up);
$(el).find('.string').html(string);
$('.likes-button').toggleClass(color)
Cookies.set('color', 'heart')
}
})
})
css
.heart i.fa-heart{
color : #f44336
}
答案 0 :(得分:2)
您可以添加一个if块来检查是否设置了cookie。 如果cookie已经设置,则将其删除,否则将其添加。
示例:
if(Cookies.get('color')) {
Cookies.remove('color');
} else {
Cookies.set('color', 'heart');
}
完整代码
let color = Cookies.get("color");
if (color) {
$(".likes-button").toggleClass(color);
}
$(document).ready(function() {
$(".likes-button").click(function() {
var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
var el = this;
var ajaxdata = $(this).attr("data-id");
var ajaxstring = $(this).attr("string");
console.log(ajaxstring);
$.ajax({
type: "POST",
url: "/ajax/upvote/",
data: JSON.stringify({ product_id: ajaxdata, string: ajaxstring }),
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"X-CSRFToken": csrftoken
},
success: function(response) {
var up = response["likes"];
var string = response["string"];
console.log(string);
console.log(up);
$(el)
.find(".target")
.html(up);
$(el)
.find(".string")
.html(string);
if (Cookies.get("color")) {
$(".likes-button").toggleClass(Cookies.get("color"));
Cookies.remove("color");
} else {
Cookies.set("color", "heart");
$(".likes-button").toggleClass("heart");
}
},
error: function(rs, e) {
alert(rs.responseText);
}
});
});
});
答案 1 :(得分:0)
解决方案:感谢@Sohail
let color = Cookies.get("color");
if (color) {
$(".likes-button").toggleClass(color);
}
$(document).ready(function() {
$('.likes-button').click(function(){
var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
var el= this;
var ajaxdata = $(this).attr('data-id');
var ajaxstring = $(this).attr('string');
console.log(ajaxstring)
$.ajax({
type: "POST",
url: '/ajax/upvote/',
data: JSON.stringify({'product_id' : ajaxdata,'string': ajaxstring}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
"X-CSRFToken": csrftoken
},
success: function(response) {
var up = response['likes']
var string = response['string']
console.log(string);
console.log(up)
$(el).find('.target').html(up);
$(el).find('.string').html(string);
if (Cookies.get("color")) {
$(".likes-button").toggleClass(Cookies.get("color"));
Cookies.remove("color");
} else {
Cookies.set("color", "heart");
$(".likes-button").toggleClass("heart");
}
},
error: function(rs, e) {
alert(rs.responseText);
}
});
})
});