將數組值分配給表格單元格
[英]Assigning Array Values to Table Cells
問題描述
我正在嘗試使用Javascript創建一個簡單的記憶游戲，並且已經創建了一個字母數組來匹配該游戲，但是，我在弄清楚如何為該表的每個單元格實際分配一個字母時遇到了麻煩作為董事會。
<html>
<head>
<style>
td {
background-color: red;
width:100px;
height:100px;
border:1px solid black
}
</style>
<table>
<tr>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
</tr>
<tr>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
</tr>
<tr>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
</tr>
<tr>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
</tr>
</table>
<script>
var letters = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H'];
var square_values = [];
var square_ids = [];
var i = letters.length, j, temp;
while(--i > 0) {
j = Math.floor(Math.random() * (i+1));
temp = letters[j];
letters[j] = letters[i];
letters[i] = temp;
}
</script>
</head>
<body>
</body>
</html>
2 個解決方案
解決方案1
1 已采納 2017-07-27 23:35:52
我建議一種稍微不同的方法。 我編寫了一個函數，該函數基於隨機數組構建網格，而不是先構建表格然后放字母。 我從這個問題中借用了一個函數來隨機化數組。 然后，我添加了事件偵聽器，以通過將其值更改為data-letter屬性來“翻轉”卡。
我還沒有編寫其余的游戲邏輯-我不想踩你的腳！ 顯然，您希望這樣做，以便如果您翻了兩張不匹配的書，他們會回去再試一次，但是如果他們翻了，他們會一直顯示-我確定您可以按照邏輯操作修改我的功能，添加事件監聽器。
buildGrid(); //global var a, b = ''; function buildGrid() { var letters = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H']; var randomised = shuffle(letters); var num_letters = randomised.length; var str_tbl = ''; while (num_letters >= 4) { str_tbl += '<tr>'; for (var i = 0; i < 4; i++) { str_tbl += '<td data-letter="' + randomised[i] + '">?</td>'; } str_tbl += '</tr>'; ranomdised = randomised.splice(0, 4); num_letters -= 4; } var tbl = document.createElement('table'); tbl.innerHTML = str_tbl; document.getElementsByClassName('grid')[0].appendChild(tbl); addEventListeners(); } function addEventListeners(){ var tds = document.getElementsByTagName( 'td' ); for( var i = 0; i < tds.length; i++ ){ tds[i].addEventListener( 'click', function(){ this.innerHTML = this.getAttribute( 'data-letter'); this.className += ' chosen'; }); } } // borrowed from https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; }
td { background-color: #cccccc; text-align: centre; padding: 20px; height: 100px; width: 100px; color: #333333; font-family: helvetica, arial, sans-serif; font-size: 30px; font-weight: bold; cursor: pointer; } td:hover { background-color: #dddddd; } td.chosen { background-color: lightblue; }
<div class="grid"></div>
解決方案2
0 2017-07-27 23:38:54
您需要將參數從單擊表傳遞到單擊處理程序代碼，以指示已單擊了哪個表元素及其在字母數組中的位置。
有許多方法可以做到這一點，包括使用Event對象，但這是一個簡單的想法。
- 刪除所有id屬性。 無論如何，它們不應重復。
更改每個“ onclick =“代碼段，以發送已單擊的元素以及要使用的下標。 因此，“ onclick”規范看起來像
onclick="revealLetter( this, 0)" // through to onclick="revealLetter( this, 15)"
然后編寫代碼revealLetter ，將它們用作參數：
function revealLetter( tdElement, subscript) {
// where tdElement is the table data element clicked, and
// subscript is a subscript to look its letter up in an array
// ... insert code here
如前所述，有很多方法可以做到這一點，但是您可以在獲得更多經驗的同時使用這種相當簡單的方法。
如果您沒有聽說過，請不要忘記在MDN或W3Schools上查找“ innerHTML”和“ textContent”。 （它們是HTML元素的屬性）
為表格單元格分配ID？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.