Question

所以我使用d3和jquery一起加载一个充当弹出窗口的模板。我所拥有的是多个相同的按钮，每个按钮都会激活此功能，并使用指定的文本显示此弹出窗口。

function(d, i){
  var x = d3.select("body")
    .append("div")
    .attr("id", "x" + i);

  $("#x" + i).load("template.html", function(){ $("#textBox").text(data)});
}

使用模板：

<html>
  <div id="textBox"></div>
</html>

d3.select.append正在按预期工作。每次单击不同的按钮时，都会创建一个具有相关ID的新div。但是每次调用.load（）都会将文本加载到创建的第一个div中，而不是带有指定id的div。我相信我误解了.load（）是如何工作的，是.load的回调函数正在寻找＆＃34; #textBox＆＃34;的第一个实例。如果是这样，可以在模板中定义动态ID吗？

首先点击：

<div id = "x1">
  <div id="textBox">data1</div>
</div>

第二次点击：

<div id = "x1">
  <div id="textBox">data2</div>
</div>
<div id = "x2">
  <div id="textBox"></div>
</div>

感谢您的时间

Answer 1

您误解了HTML的工作原理，而不是load。 id属性代表标识符 has to be unique in a document。所以答案既不是jQuery，也不是D3。

您需要将textBox从id属性值更改为class属性值。回调中的选择器将更改为'#x' + i + ' .textBox'。

使用jquery / d3动态重用模板

1 个答案: