Question

我尝试使用循环显示水平条形字母。我已经通过使用26个div元素的列表对其进行了硬编码，每个元素都有不同的id和文本，但是在这种情况下我想使用循环。我对如何解决这个问题感到有些困惑。顺便说一句，我在html中使用javascript。该项目也在整体上使用jQuery。每个字母都必须是可点击的。总而言之，我正在制作一个刽子手游戏。

<div id="letters">
  for(x = 0; x<26; x++){
    <div class="letter" id=x>(text for each letter)?????</div>
  }
</div>

Answer 1

您需要使用Javascript函数在此处使用循环。 AngularJS最好使用这样的代码。请查看以下示例：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop from 1 to 6, to make HTML headings.</p>
<button onclick="myFunction()">Try it</button>
<div id="demo"></div>

<script>
function myFunction() {
var x ="", i;
for (i=1; i<=6; i++) {
    x = x + "<h" + i + ">Heading " + i + "</h" + i + ">";
}
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Answer 2

让我们说我们有一个带有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>');
}

示例：https://jsfiddle.net/mo1Ljm7r/

可点击按钮： https://jsfiddle.net/mo1Ljm7r/1/

Answer 3

这样的事可能有效

<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>

Answer 4

如果您希望每个字母都可以作为按钮点击，那么您应该将它们创建为按钮元素而不是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>

Answer 5

因为它是一个刽子手游戏而成为一个表格。使用了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>

如何在div元素中获取文本

5 个答案: