Javascript 如何在Django中使用Ajax函数切换愿望列表按钮

所以我遇到了一个让我发疯的虫子。当你打开我的网页时，会看到一个工作列表，旁边有一个心形的愿望列表图标。通常情况下，如果作业是您愿望列表的一部分，它应该显示为红色图标，如果单击该图标，将弹出一个sweetalert弹出窗口，说明该作业已从您的愿望列表中删除。如果这份工作不在你的愿望清单中，它会以蓝色显示，如果你点击它，就会弹出一个窗口，说这份工作已经添加到你的愿望清单中。所有这些都有效，除了当您刚刚第一次加载页面时，，并且列出的作业之一不是您愿望列表的一部分，并且以蓝色显示。如果单击此蓝色图标，而不是说“已添加到愿望列表”并变为红色，它会说“已从愿望列表中删除”，并保持蓝色，即使它不是愿望列表的一部分。再次单击按钮，将执行正确的操作，说出“添加到愿望列表”并翻转颜色，因此错误仅在第一次发生。第一次设置.data（'wl'）时出错

但有趣的是，如果您第一次加载页面，并且其中一个作业是您的愿望列表的一部分，并显示为红色，单击它将执行正确操作，弹出窗口说它已被删除，将愿望列表图标变为蓝色-因此此错误仅在第一次尝试将蓝色图标变为红色时发生。除非刷新页面，否则任何后续尝试都可以正常工作。单击愿望列表（红色）作业将其变为蓝色时，即使第一次尝试，也不会发生错误

旁注：请记住，我正在尝试在不重新加载页面的情况下更改愿望列表图标的颜色。我还包括了一个用于上下文的图像。谢谢

函数添加或删除（id）{
如果（id）{
var-wishlist=$（'#jobwl'+id）.data（'wl'）；
如果（愿望列表==0）{
$.ajax({
url:“/users/add wishlist/”+id，
方法：“获取”，
成功：函数（）{
$（'#jobwl'+id）.removeClass（'btn-primary'）.addClass（'btn-danger'））
const Toast=Swal.mixin({
吐司：是的，
位置：'顶端'，
showConfirmButton：没错，
计时器：3000，
timerProgressBar：对，
迪多普：（吐司）=>{
toast.addEventListener（'mouseenter'，Swal.stopTimer）
toast.addEventListener（'mouseleave'，Swal.resumeTimer）
}
})
烤面包，火({
图标：“成功”，
标题：“添加到愿望列表”
})
$（'#jobwl'+id）.data（'wl'，1）；
}
});
}否则{
$.ajax({
url:“/users/remove wishlist/”+id，
方法：“获取”，
成功：函数（）{
$（'#jobwl'+id）.removeClass（'btn-danger'）.addClass（'btn-primary'））
const Toast=Swal.mixin({
吐司：是的，
位置：'顶端'，
showConfirmButton：没错，
计时器：3000，
timerProgressBar：对，
迪多普：（吐司）=>{
toast.addEventListener（'mouseenter'，Swal.stopTimer）
toast.addEventListener（'mouseleave'，Swal.resumeTimer）
}
})
烤面包，火({
图标：“成功”，
标题：“从愿望列表中删除”
})
$（'#jobwl'+id）.data（'wl'，0）；
}
});
}
}
}

{%if-job.id在愿望列表%}
{%else%}
{%endif%}

Hi，var wishlist=$（“#jobwl”+id）是什么意思提供给您？在我的href中，我将它设置为id=“jobwl{{job.id}}job.id将是从数据库接收到的主键。您是否检查了

wishlist

的确切内容？

0

或

1

？嗨，

var wishlist=$（'#jobwl'+id）。数据（'wl'）；

给了您什么？在我的href中，我将它设置为id=“jobwl jobwl{job.id}}job.id将是从数据库接收的主键您是否检查了

wishlist

的确切内容<代码>0或

1

？