使用jQuery为指定类SVG path切换class时if分支不触发如何解决

核心原因 #

• 你的选择器$(".fracture-details")会匹配所有对应类的path元素，返回多元素的jQuery集合。调用hasClass()方法时，jQuery仅会校验集合中第一个元素是否包含指定的toggleMap类，只要第一个元素没有该类，哪怕其他元素都有，也会返回false，这就是if分支始终无法触发的根本原因。
• 直接用attr()覆盖class属性的写法容错性很低，如果后续你给这类path元素新增了其他类，会被直接覆盖掉，不是操作类的最优方案。

修复方案 #

直接使用jQuery内置的toggleClass()方法即可，该方法会自动遍历所有匹配的元素，统一切换指定类的启用/禁用状态，不需要你手动写判断逻辑，一行代码就能实现需求：

$(".fracture-details").toggleClass("toggleMap");

如果你确实需要手动实现判断逻辑（比如要在切换前后加额外操作），可以用以下方式修正判断条件，准确校验是否存在带toggleMap类的目标元素：

if ($(".fracture-details.toggleMap").length > 0) {
    // 统一移除类
    $(".fracture-details").removeClass("toggleMap");
} else {
    // 统一添加类
    $(".fracture-details").addClass("toggleMap");
}

内容的提问来源于stack exchange，提问作者Quincy Norbert