我正在尝试使用循环来显示水平的字母栏。我已经通过使用包含26个div元素的列表进行硬编码，每个div元素具有不同的id和文本，但是希望在这种情况下使用循环。我对如何解决这个问题有点困惑。顺便说一下，我在html中使用了javascript。该项目也使用jQuery。每个字母必须是可点击的。总而言之，我正在做一个hang子手游戏。如何获取div元素内的文本
<div id="letters">
for(x = 0; x<26; x++){
<div class="letter" id=x>(text for each letter)?????</div>
}
</div>
您需要使用Javascript函数才能在此处使用循环。 AngularJS将最好使用这样的代码。 请检查下面的例子：
但是如果我需要每封信都是可点击的呢？ –
假设我们甲肝ID为字母一个div，我们想填补
var $holder = $('#alphabet');
var alphabet = 'abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ';
for (var i = 0; i < alphabet.length; i++) {
var letter = alphabet[i];
$holder.append('<div id="'+ letter +'">'+ letter +'</div>');
}
像这样的东西可能会工作
<div id="letters"></div>
<script>
var x;
var alphabet = [a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z];
for(x = 0; x<26; x++) {
var temp = document.createElement("div");
temp.innerHtml = "<a href='something'>" + alphabet[x] + "</a>";
document.querySelector('#letters').appendChild(temp);
}
</script>
如果您希望每个字母都可点击作为按钮，那么您应该将它们创建为按钮元素而不是div元素。
下面是一个javascript示例，它为以“A”开头的每个字母创建一个按钮元素。
每个按钮元素都增加了一个类letter-button，它允许您使用CSS以相同的方式格式化所有按钮。
let lettersDiv = document.getElementById("letters");
let aLetterAsciiCode = "A".charCodeAt(0); //ascii character code for "A". decimal value of 65
for(i = 0; i<26; i++){
let letterButton = document.createElement("button");
letterButton.className += "letter-button"; //use css to define the formatting of your letter buttons
let letterAsciiCode = aLetterAsciiCode + i; //A-Z are sequential in Ascii
let letter = String.fromCharCode(letterAsciiCode); //convert back to a string
let letterContent = document.createTextNode(letter);
letterButton.appendChild(letterContent);
lettersDiv.appendChild(letterButton);
}.letter-button{
display: inline;
border: 1px solid black;
margin:2px;
}<div id="letters">
</div>'charCodeAt'返回一个UTF-16码点，其中一个或两个用于Unicode码点。通过很多步骤，假设和限制，你可以解释它也是ASCII的情况。但是，你必须再次将其转换为'fromCharCode'。 –
使它成为形式，因为它是一个刽子手游戏。使用createElement()和appendChild()方法和for循环。我还添加了使用addEventListener()方法收集字母的功能。详细信息在Snippet中进行了评论。
代码片段
function alphaPanel() {
// Reference the <form>
var gallows = document.forms[0];
// Create a <fieldset>
var set = document.createElement('fieldset');
// Make an array of 26 strings
var alphaArray = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
/* Start at 0;
|| For every loop...
|| ...Create a <label>...
|| ...Create an <input>...
|| ...Make <input> a [checkbox] type...
|| ...Assign <[check]> the value of i as indexed in alphaArray.
|| ...Add text to <label> with the value of i as indexed in alphArray.
|| ...Append <[check]> to <label>...
|| ...Append <label> to <fieldset>...
|| ...Continue doing this loop 25 more times
|| ...After the 26th loop is completed...
|| ...Append <fieldset> to <form>
*/
for (let i = 0; i < 26; i++) {
var label = document.createElement('label');
var check = document.createElement('input');
check.setAttribute('type', 'checkbox');
check.value = alphaArray[i];
label.textContent = alphaArray[i];
label.appendChild(check);
set.appendChild(label);
}
gallows.appendChild(set);
}
// An empty array to store the player's picks
var picked = [];
// When a change event occurs in <form> call alphaData()
gallows.addEventListener('change', alphaData, false);
/* If the node <[check]> is not...
|| ...the current node on the event chain...
|| ...then it's is the node that was clicked.
|| Store that node's value and then...
|| ...add it to the array picked.
*/
function alphaData(event) {
if (event.target !== event.currentTarget) {
var target = event.target;
var pick = target.value;
picked.push(pick);
}
console.log('Player has picked: ' + picked.toString());
}
// Call alphaPanel()
alphaPanel();input[type='checkbox'] {
width: 3ch;
height: 3ex;
}
label {
border: 1px solid grey;
padding: 3px;
line-height: 1.6;
}<form id='gallows' name='gallows'></form>
我不确定你在做什么。您在HTML中使用的语言是什么语言。我们能获得更多的上下文吗 – ntgCleaner
我编辑了文章 –
*“我在html里面使用javascript的方式”* ...你在哪里得到了这样的想法？ – charlietfl