如何獲取div元素內的文本

-3

我正在嘗試使用循環來顯示水平的字母欄。我已經通過使用包含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>

來源

2017-01-09 Harrison Bergman

我不確定你在做什麼。您在HTML中使用的語言是什麼語言。我們能獲得更多的上下文嗎 – ntgCleaner

我編輯了文章 –

*「我在html裏面使用javascript的方式」* ...你在哪裏得到了這樣的想法？ – charlietfl

您需要使用Javascript函數才能在此處使用循環。 AngularJS將最好使用這樣的代碼。請檢查下面的例子：

來源

2017-01-09 21:31:55

但是如果我需要每封信都是可點擊的呢？ –

假設我們甲肝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/

來源

2017-01-09 21:34:31

像這樣的東西可能會工作

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

來源

2017-01-09 21:35:56

如果您希望每個字母都可點擊作爲按鈕，那麼您應該將它們創建爲按鈕元素而不是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>

來源

2017-01-09 21:58:55

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

來源

2017-01-09 22:31:08 zer00ne

如何獲取div元素內的文本

回答

相關問題