时间戳

首页 > 解决方案 > 为点击事件定义和调用函数而不是内联函数

javascript - 为点击事件定义和调用函数而不是内联函数

问题描述

我能够为任何节点上的点击事件定义一个内联函数，但是我试图让我的代码更简洁，所以我想声明我的函数并为点击事件调用它。

这是内联版本：

node.on("click", function(n){
  var active = !n.active ? true :false;
  console.log(active);
})

这是带有函数调用的版本：

node.on("click", linkSwitch(n));

linkSwitch(n){
  var active = !n.active ? true :false;
  console.log(active);
}

仅用于函数调用版本。我收到此错误：

Uncaught ReferenceError: n is not defined

我不知道为什么？？

标签： javascriptd3.jsonclick

解决方案

当你这样做...

node.on("click", function(n){

...该参数n对应于 D3 自动传递给匿名函数的第一个参数，即datum。

但是，当您这样做时：

node.on("click", linkSwitch(n));

你有两个问题：

  1. 你n显然是未定义的，所以这个错误并不奇怪，这是意料之中的；
  2. 您不是在单击时调用该函数：您是在立即调用该函数并返回其值。

解决方案：它应该只是：

node.on("click", linkSwitch)

这是一个演示：

const data = [{
  name: "foo",
  active: true
}, {
  name: "bar",
  active: true
}, {
  name: "baz",
  active: true
}];

const paragraphs = d3.select("body")
  .selectAll(null)
  .data(data)
  .enter()
  .append("p")
  .text(d => d.name);

paragraphs.on("click", linkSwitch);

function linkSwitch(n) {
  var active = !n.active ? true : false;
  console.log(active);
}
<script src="https://d3js.org/d3.v5.min.js"></script>

PS：一些额外的问题：

  • 您function在函数声明中缺少 ；
  • 函数中的逻辑可以简化为var active = !n.active

推荐阅读