2

如何使用Maquette正确定义单选按钮，以便呈现文本？如果我使用一个<p>元素，文本会出现，但在新行上。

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq"}),
      h("p", ["5 Hz"]),
      h("input", {type: "radio", value: "10", name: "freq"}),
      h("p", ["10 Hz"]),
      h("input", {type: "radio", value: "15", name: "freq"}),
      h("p", ["15 Hz"]),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

但是，如果我使用<br>元素，则不会出现文本。

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq"}),
      h("br", ["5 Hz"]),
      h("input", {type: "radio", value: "10", name: "freq"}),
      h("br", ["10 Hz"]),
      h("input", {type: "radio", value: "15", name: "freq"}),
      h("br", ["15 Hz"]),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

我究竟做错了什么？

4

1 回答 1

3

问题出在<br>标签上。通常，它被用作一个空的、自闭合的标签（要么 要么<br>）<br/>。您可以在此处阅读更多内容，允许的内容 - 无，它是一个空元素。

您可以使用标签上的输入和属性将文本放置在像 a<span>或事件这样的内联元素中。然后，在每行之后放置一个空白以分隔不同的单选按钮。<label>idfor<br>

这是解决方案本身：

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq", id: "freq1"}),
      h("label", {innerHTML: "5 Hz", "for": "freq1"}),
      h("br"),
      h("input", {type: "radio", value: "10", name: "freq", id: "freq2"}),
      h("label", {innerHTML: "10 Hz", "for": "freq2"}),
      h("br"),
      h("input", {type: "radio", value: "15", name: "freq", id: "freq3"}),
      h("label", {innerHTML: "15 Hz", "for": "freq3"}),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

于 2017-09-17T08:31:36.360 回答