文本不会出现在按钮上

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> 

Answer 2

您缺少choiceLabels的length值。 迭代应该遍历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>