Javascript Django、Ajax和JS在单击按钮时切换类似和不同的图标

0 我遵循了一个解决方案，即如何让Django Like和inspect按钮在单击时不重新加载页面。我找到的解决方案可以工作，但只与文本切换（喜欢和不喜欢），我想要一个图标切换（喜欢和不喜欢图标）

我是Django后端和Ajax新手，如果有人能帮助我解决这个问题，我会很高兴。提前谢谢

$（文档）.ready（函数（）{
$（'.like form'）.submit（函数（e）{
e、 预防默认值（）
const post_id=$（this.attr（'id'））
const likeText=$（`.like btn${post_id}'）.text（）
常量修剪=$.trim（如文本）
常量url=$（this.attr（'action'））
让我们重新来过；
const likes=$（`.like count${post_id}'）。text（）
常量trimCount=parseInt（likes）
$.ajax({
键入：“POST”，
url:url，
数据：{
'csrfmiddlewaretoken'：$（'input[name=csrfmiddlewaretoken]'）。val（），
“post\u id”：post\u id，
},
成功：功能（响应）{
如果（修剪==='不同'）{
$（`.like btn${post_id}`）.text（'like'）
res=trimCount-1
}否则{
$（`.like btn${post_id}`）.text（'不像'）
res=trimCount+1
}
$（`.like count${post\u id}`）.文本（res）
},
错误：函数（响应）{
console.log（'错误'，响应）
}
})
});
});


{%csrf_令牌%}
{%如果用户不在obj.liked.all%}
喜欢
{%else%}
不像
{%endif%}
{{obj.num_likes}

您也可以使用
文本在成功函数中添加图标。另外，将
like
和
inspective
放在
span
内，这样可以很容易地更改值

演示代码：


$（'.like form'）.submit（函数（e）{
e、 预防默认值（）
const post_id=$（this.attr（'id'））
const likeText=$（“.like btn”+post_id）.find（“i”）.hasClass（“fa-heart-o”）？“不像”：“像”//检查类，如果为真，则将值设置为“不像”或“像”。。
常量修剪=$.trim（如文本）
常量url=$（this.attr（'action'））
让我们重新来过；
const likes=$（`.like count${post_id}'）。text（）
常量trimCount=parseInt（likes）
/*$.ajax({
键入：“POST”，
url:url，
数据：{
'csrfmiddlewaretoken'：$（'input[name=csrfmiddlewaretoken]'）。val（），
“post\u id”：post\u id，
},
成功：功能（响应）{*/
如果（修剪==='不同'）{
//使用.html添加htmls代码
$（`.like btn${post_id}`）html（“”）
res=trimCount-1
}否则{
$（`.like btn${post_id}`）html（“”）
res=trimCount+1
}
$（`.like count${post\u id}`）.文本（res）
/*  },
错误：函数（响应）{
console.log（'错误'，响应）
}
})*/
});

12
5.
Hi为什么不简单地这样做：
$（“.like btn”+post_id）.html（'like'）
，其他按钮也一样。@Swati我昨天试过了，但没有正常工作。图标仅在第一次单击时切换，除非重新加载页面，否则永远不会切换。唯一能正常工作的是文本切换（喜欢和不喜欢），但图标确实不行。非常感谢您，您的解决方案工作得非常好。如果我只想显示图标而不想显示文本，怎么样？您好，您可以检查
i
标记的类别，并根据该类别更改您的图标。因此，根据我的代码，您需要更改
const likeText=$（“.like btn”+post_id）。查找（“i”）。hasClass（“fa-heart-o”）？“喜欢”：“不喜欢”
再次感谢@Swati。所以我只需要更改这行代码（const likeText=$（“.like btn”+post_id）。查找（“i”）.hasClass（“fa-heart-o”））并删除带有文本的span标记，以获得我想要的结果？“喜欢”：“不喜欢”）去哪里了？你能用这个解决方案更新你的演示答案吗？为了更好地理解，谢谢你的时间和支持。嗨，我已经更新了我的答案。看一看：）再次感谢@Swati。。。。。所以现在我必须使用两种形式，一种用于“相似”按钮，另一种用于“不相似”按钮。。。对的