使用 jquery/d3 动态重用模板

Dynamically reusing template with jquery/d3

本文关键字：动态 jquery d3 使用      更新时间：2023-09-26

所以我使用 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 的回调函数是否在寻找"#textBox"的第一个实例？如果是这样，是否可以在模板中定义动态 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>

谢谢你的时间

你误解了 HTML 的工作原理，而不是load 。 id属性代表在文档中必须是唯一的标识符。所以答案既不是关于jQuery，也不是关于D3。

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

相关文章：