在attr中动态onclick？
在attr中动态onclick？
提问于 2020-08-21 14:57:48
我想动态创建一组由字符串列表生成的按钮：
keys = [ "Temp_Innen", "Temp_Außen", "Druck", "Feuchte_Innen", "Feuchte_Außen", "PH10", "PH25" ]这些字符串还应用于onClick事件函数(参数)上的每个按钮...
我使用它来创建主体中的按钮：
d3.select('body')
.selectAll('button')
.data(keys)
.enter()
.append('button')
.text(d => d)
.attr('type', 'button');这给了我漂亮的按钮：
但是，如何将每个字符串动态添加到通过onClick调用的函数参数中呢？我试过了，但不起作用：
.attr('onClick',`clicked(${d => d})`);但这并不是将字符串写入clicked()参数，而是将其写入未表示的文本中：
<button type="button" onClick="clicked(d => d)">Temp_Innen</button>
<button type="button" onClick="clicked(d => d)">Temp_Außen</button>
...有没有办法动态地做到这一点，或者我应该考虑在我的html文件中静态地编写所有这些按钮？
回答 3
Stack Overflow用户
发布于 2020-08-21 18:45:20
首先，与问题中的代码不同，your answer是有效的，因为传递给attr方法内的匿名函数的第一个参数是绑定到元素的数据，正如API中所有地方所描述的那样
...如果该值是一个函数，将按传递当前数据(d)、当前索引(i)和当前组(节点)的顺序，为每个选定元素计算该值，并将其作为当前DOM元素(nodesi)
另一方面，在你的问题中，这...
`clicked(${d => d})`...is只是一个字符串，永远不会对d求值。
话虽如此，让我们继续回答:许多人建议不要使用内联事件或DOM onevent handlers，例如您问题中的onClick。我不会深入讨论这个问题(参见here)；不过，我想说的是，使用D3 on方法添加事件侦听器是一种惯用的方式。
这很简单：
.on("click", d => {
//code here
})演示如下：
const keys = ["Temp_Innen", "Temp_Außen", "Druck", "Feuchte_Innen", "Feuchte_Außen", "PH10", "PH25"];
d3.select('body')
.selectAll('button')
.data(keys)
.enter()
.append('button')
.text(d => d)
.attr('type', 'button')
.on("click", d => console.log("you clicked " + d));<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
Stack Overflow用户
发布于 2020-08-21 15:11:40
到目前为止，这是可行的：
.attr('onClick',(d) => {
return `clicked("${d}")`});正确地表示为：
<button type="button" onclick="clicked('Temp_Außen')">Temp_Außen</button>
<button type="button" onclick="clicked('Temp_Innen')">Temp_Innen</button>Stack Overflow用户
发布于 2020-08-21 15:31:52
d3.select('body')
.selectAll('button')
.data(keys)
.enter()
.append('button')
.text(d => d)
.attr('type', 'button')
.attr('onClick', addClickFunction);定义您的函数addClickFunction(d，i)，其中您的值在d和i中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63517958
复制相关文章
相似问题
腾讯云开发者
