javascript - 如何切换选择中所有元素的类别？

Question

我正在尝试编写一个函数，当这些元素还没有该类时，将一个类添加到选择中的所有元素，反之亦然:

function toggleLinksActivity(d) {
  d3.selectAll(".link")
    .filter(l => l.target == d)
    .classed("non-active", l => !l.classed("non-active"));
}

这给出了 .classed 不是函数的错误。 documentation声明 .classed 应该在选择时调用，所以我尝试将最后一行更改为 !d3.select(l).classed("non-active")，但这也不起作用(“t.getAttribute 不是函数”)。哪里出了问题，正确的做法是什么？

注意:我已经用下面的 2 个独立函数解决了我的问题，但我发现将切换开关分成两部分很难看。

function activateLinks(d) {
  d3.selectAll(".link")
    .filter(l => l.target == d)
    .classed("non-active", false);
}

function deactivateLinks(d) {
  d3.selectAll(".link")
    .filter(l => l.target == d)
    .classed("non-active", true);
}

Answer 1

杰拉尔多的 answer使用 Element.classList 指向正确的方向, 但建议的解决方案仍然可以简化。事实证明，classList 属性已经具有 .toggle() 方法，其工作方式如下:

toggle( String [, force] )
When only one argument is present: Toggle class value; i.e., if class exists then remove it and return false, if not, then add it and return true. When a second argument is present: If the second argument evaluates to true, add specified class value, and if it evaluates to false, remove it.

因此您的函数可以写成:

function toggleLinksActivity(d) {
  d3.selectAll(".link")
    .each(function(l) {
      if (l.target == d) {
        this.classList.toggle("non-active");
      }
    });
}