Question

作为练习，我在不使用jQuery的情况下创建一个简单的测验应用程序。我正在尝试使用javascript添加单选按钮作为答案选项

html正文如下

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <p id="question"></p>
        <form name="answers">
            <fieldset class="form-group">
                <div class="form-check" id="answersId">
                </div>
            </fieldset>
        </form>
    </div>
</div>

下面我的js脚本会在div class="form-check"

中添加单选按钮

function firstQuestion() {

        var answerSection = document.getElementById("answersId");

        for(var i = 0; i < allQuestions[0].choices.length; i++) {
            var radioElement = [];
            radioElement[i] = document.createElement("input");
            radioElement[i].setAttribute("class", "form-check-input");
            radioElement[i].setAttribute("type", "radio");
            radioElement[i].setAttribute("name", "choice");
            radioElement[i].setAttribute("value", i);

            var label = [];
            label[i] = document.createElement("label");
            label[i].setAttribute("class", "form-check-label");

            var labelText = [];
            labelText[i] = document.createTextNode(allQuestions[0].choices[i]);

            label[i].appendChild(radioElement[i]);

            label[i].appendChild(labelText[i]);

            answerSection.appendChild(label[i]);
        };
    }

我无法获得引导外观，即：

- 每个单选按钮是内联的，而不是新行（垂直排列）

按钮和标签之间的间距与bootstrap示例不同

为什么会这样？有人能指出我吗？

Answer 1

那是因为bootstrap依赖于jquery，你不能期望bootstrap在没有jquery的情况下工作

Answer 2

var answerSection = document.getElementById("answersId");
var radioElement = [];
var label = [];
var labelText = [];
var span;
for (i = 1; i < 4; i++) {
  span = document.createElement("span");
  span.setAttribute("style", "padding:15px");
  radioElement[i] = document.createElement("input");
  radioElement[i].setAttribute("class", "form-check-input");
  radioElement[i].setAttribute("type", "radio");
  radioElement[i].setAttribute("name", "choice");
  radioElement[i].setAttribute("value", i);
  label[i] = document.createElement("label");
  label[i].setAttribute("class", "form-check-label");
  labelText[i] = document.createTextNode("choice " + i);
  label[i].appendChild(radioElement[i]);
  label[i].appendChild(labelText[i]);
  span.appendChild(label[i]);

  answerSection.appendChild(span);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <p id="question"></p>
    <form name="answers">
      <fieldset class="form-group">
        <div class="form-check" id="answersId">
        </div>
      </fieldset>
    </form>
  </div>
</div>

您应该添加这3行以进行引导工作。这些是CDN链接，但如果您在计算机上有这些链接，那么正确添加它们

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

正如@leccionesonline所说，bootstrap.min.js需要jquery.min.js文件。因此，您应该在bootstrap.min.js之前加载jquery.min.js

这是参考link

包括带js的Bootstrap类

2 个答案: