Jquery 按钮控制流程-打开和关闭一组

我正在制作一张世界地图，允许用户选择他们想查看哪些地区的数据

我已经建立了一个功能，用户不必点击所有六大洲，只需按下一个按钮，然后全选即可

问题是，如果一些用户在“全选”按钮之前选择了一些大陆，则toggleClass jquery函数会将这些大陆保持为非活动状态

我一直在想一个方法，我可以切换这个

$('#globe').on("click", function() {
    $('#globe').toggleClass('clicked')
    $('#north_america path').addClass('clicked')
    $('#south_america path').addClass('clicked')
    $('#australia path').addClass('clicked')
    $('#asia path').addClass('clicked')
    $('#africa path').addClass('clicked')
    $('#europe path').addClass('clicked')
});

目前，我有上面的功能，可以将它们全部打开，但我无法将它们全部关闭。努力思考控制流

---

谢谢。

如果您想保留这种方法，您可以删除所有单击的类

$('.clicked').removeClass('clicked');

但是，使用此单击事件，您仍然需要知道何时关闭所有功能，何时打开所有功能

但是使用jQuery的函数“hasClass”很容易做到这一点

您的完整代码可以是：

$('#globe').on("click", function() {
    if ($(this).hasClass('clicked')) {
      $('.clicked').removeClass('clicked');
      return true;
    }
    $('#globe').addClass('clicked')
    $('#north_america path').addClass('clicked')
    $('#south_america path').addClass('clicked')
    $('#australia path').addClass('clicked')
    $('#asia path').addClass('clicked')
    $('#africa path').addClass('clicked')
    $('#europe path').addClass('clicked')
});

---

如果您想保持这种方法，您可以删除所有单击的类

$('.clicked').removeClass('clicked');

但是，使用此单击事件，您仍然需要知道何时关闭所有功能，何时打开所有功能

但是使用jQuery的函数“hasClass”很容易做到这一点

您的完整代码可以是：

$('#globe').on("click", function() {
    if ($(this).hasClass('clicked')) {
      $('.clicked').removeClass('clicked');
      return true;
    }
    $('#globe').addClass('clicked')
    $('#north_america path').addClass('clicked')
    $('#south_america path').addClass('clicked')
    $('#australia path').addClass('clicked')
    $('#asia path').addClass('clicked')
    $('#africa path').addClass('clicked')
    $('#europe path').addClass('clicked')
});