通过可变类名获取元素：类选择器无法切换类的问题

核心问题：a标签默认跳转行为中断了效果 #

你的<a>标签点击后会触发默认跳转（哪怕href是#），这会导致页面刷新或滚动，刚执行的toggleClass效果瞬间被重置，看起来就像没生效。

解决方法：在click事件里阻止默认行为：

$(".heart").click(function(e){ // 添加上e参数
  e.preventDefault(); // 阻止默认跳转行为
  // 剩余代码不变
});

其他优化（避免潜在问题） #

1. 变量声明规范：你代码里的heartelementid、loadurl、heartobject都没声明，会变成全局变量，容易和其他代码冲突，建议加上let/const：

$(".heart").click(function(e){
  e.preventDefault();
  const heartelementid = $(this).data("elementid");
  const loadurl = "/addlove?id=" + heartelementid;
  const heartobject = "heart" + heartelementid;
  // ...后续代码
});

2. 精准定位元素：当前用$('svg.'+heartobject)会选中页面所有带该类的svg，建议限定在点击的<a>标签内部查找，避免影响其他无关元素：

// 替换原有的toggleClass代码
$(this).find('svg.'+heartobject).toggleClass("d-none");

验证逻辑 #

如果你的console.log("success")能正常输出，说明load请求成功，只需要阻止a标签的默认行为就能看到toggle效果。如果success没输出，得先排查$("#div")是否存在，或者接口请求是否正常。

内容的提问来源于stack exchange，提问作者Bart Rylant