javascript - 追加具有不同属性的元素

Question

我正在尝试使用 D3 的追加方法将按钮添加到 div。每个添加的按钮都应具有不同的 onclick 属性。

var row = 0;

function addButton () {
  row++
  d3.select("div")
    .append("button")
    .text("Add Node - Row " + row)
    .attr("onclick", "addNode(row)");
}

function addNode(row) {
  window.alert(row);
}

<script src="https://d3js.org/d3.v4.min.js"></script>


<button onclick="addButton()">Add Button</button>
<div></div>

当我运行“addButton”函数时，它会正确地向 div 添加一个按钮。但是，当我通过再次运行函数添加第二个按钮时，第一个按钮的属性被覆盖，因此两个按钮现在具有相同的 onclick-attribute。奇怪的是它适用于“.text”但不适用于“.attr”。我该怎么做才能不影响之前添加的按钮？

Answer 1

它适用于文本，因为您实际上使用了 row 变量的值。只需执行与调用 text() 时相同的操作，它将按预期工作(注意 addNode(${row})):

var row = 0;

function addButton () {
  row++
  d3.select("div")
    .append("button")
    .text("Add Node - Row " + row)
    .attr("onclick", `addNode(${row})`);
}

function addNode(row) {
  window.alert(row);
}

<script src="https://d3js.org/d3.v4.min.js"></script>


<button onclick="addButton()">Add Button</button>
<div></div>