javascript - 文字不出现在按钮上

Question

我正在尝试创建四个按钮，其中四个标签以随机顺序出现:

<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>

标签存放在

var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];

然后代码遍历选项以将它们粘贴到按钮中:

for (var i=0; i<choiceLabels; i++) {
    var theID="#quizChoice"+i.toString();
    $(theID).text(choiceLabels[i])
};

但文本不会出现在按钮上 - 它们保持空白。 有人知道为什么吗？

Answer 1

您的错误在这里:i<choiceLabels . choiceLabels是一个数组，所以你必须做 i<choiceLabels.length .

var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
for (var i=0; i<choiceLabels.length; i++) {
    var theID="#quizChoice"+i.toString();
    $(theID).text(choiceLabels[i])
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
                <button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>