作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
好的,我一直在尝试根据数据集中的列数动态地将一些复选框附加到 div。所以我认为 d3 将是要走的路,只需将输入附加适当的属性和一些文本作为从数据确定的标签。我试过下面的代码;
d3.select("body").selectAll("input")
.data([11, 22, 33, 44])
.enter().append("input")
.attr("checked", true)
.attr("type", "checkbox")
.attr("id", function(d,i) { return i; })
.attr("onClick", "change(this)")
.attr("for", function(d,i) { return i; })
.text(function(d) { return d; });
这会导致页面上有 4 个复选框但没有标签。
真正奇怪的是,当我检查元素时,生成的 html 似乎是我所追求的,如下所示。
<input checked="true" type="checkbox" id="0" onclick="change(this)" for="0">11</input>
<input checked="true" type="checkbox" id="1" onclick="change(this)" for="1">22</input>
<input checked="true" type="checkbox" id="2" onclick="change(this)" for="2">33</input>
<input checked="true" type="checkbox" id="3" onclick="change(this)" for="3">44</input>
当我在页面上使用它时,我得到的正是我所追求的。
我确信我错过了一些非常简单的东西,但对于我的生活,我看不到它是什么。任何帮助都将不胜感激!
最佳答案
您的主要问题是您不能在 <input>
之间添加文本之类的标签。它们是自动关闭的,如 <input />
.您应该使用 <label>
该文本的元素。
其他问题是ID的必须以字母开头(至少,在HTML5之前),所以id="1"
不行,但是id=a1"
会的。
也就是说,这段代码解决了这两个问题
d3.select("body").selectAll("input")
.data([11, 22, 33, 44])
.enter()
.append('label')
.attr('for',function(d,i){ return 'a'+i; })
.text(function(d) { return d; })
.append("input")
.attr("checked", true)
.attr("type", "checkbox")
.attr("id", function(d,i) { return 'a'+i; })
.attr("onClick", "change(this)");
关于checkbox - 用 d3 附加复选框时添加标签时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12054403/
我是一名优秀的程序员,十分优秀!