使用 JavaScript 捕获数组 onclick 的索引
Capturing index of an array onclick with JavaScript
https://jsbin.com/zesegigego/edit?html,js,output
我正在创建一个单词搜索谜题,此时我想实现允许用户标记他们找到的单词的功能。我有一个 s 数组,其中包含随机生成的字母和要查找的单词的字母。要找到的单词的 s 有一个 class="answerLetter",但我无法一次捕获每个索引来告诉我的 JavaScript 更改对这些特定索引做一些事情我点击。如果不清楚,我深表歉意,但是上面的 jsbin link 可以查看我目前所拥有的内容。
我知道如何使用 AngularJs 执行此操作,其中 ng-repeat 可以是 "track by $index" 我只是通过插入 $ 将 HTML 中的特定索引带到我的控制器函数括号中的索引,如 ng-click="selectThisIndex($index)"。我如何用原版 JavaScript 做到这一点?
https://jsbin.com/zesegigego/edit?html,js,output
//==============SUBMITTING ANSWERS=======================================
function showSubmit() {
document.getElementById('submitBut').innerHTML =
'<button onclick="submitLetters()">SUBMIT LETTERS</button>';
var arrayOfTds = document.getElementsByClassName('answerLetter');
console.log(arrayOfTds);
}
//==============CREATING GRID OF RANDOM LETTERS====================
var cols = 20;
var rows = 10;
var html = "";
for(var i = 0; i <= rows; i++) {
html += '<tr>';
for(var h= 0; h <= cols; h++) {
var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';
var random = parseInt(Math.random()*characters.length);
var letter = characters.charAt(random); //returning random letter
html += '<td onclick="showSubmit()">' + letter + '</td>';
}
html += '</tr>';
}
document.getElementById('wsBox').innerHTML += html;
我想这就是你想要的:)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 30px;
height: 30px;
margin: 5px;
float: right;
background: #eee;
border: solid 1px #ccc;
list-style: none;
}
</style>
</head>
<body>
<ul></ul>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
for (var i = 0; i < 20; i++) {
$("ul").append("<li class=\"box\">" + i + "</li>");
}
$(".box").each(function(index) {
$(this).click(function() {
console.log(index);
});
});
</script>
</body>
</html>
https://jsbin.com/zesegigego/edit?html,js,output
我正在创建一个单词搜索谜题,此时我想实现允许用户标记他们找到的单词的功能。我有一个 s 数组,其中包含随机生成的字母和要查找的单词的字母。要找到的单词的 s 有一个 class="answerLetter",但我无法一次捕获每个索引来告诉我的 JavaScript 更改对这些特定索引做一些事情我点击。如果不清楚,我深表歉意,但是上面的 jsbin link 可以查看我目前所拥有的内容。
我知道如何使用 AngularJs 执行此操作,其中 ng-repeat 可以是 "track by $index" 我只是通过插入 $ 将 HTML 中的特定索引带到我的控制器函数括号中的索引,如 ng-click="selectThisIndex($index)"。我如何用原版 JavaScript 做到这一点?
https://jsbin.com/zesegigego/edit?html,js,output
//==============SUBMITTING ANSWERS=======================================
function showSubmit() {
document.getElementById('submitBut').innerHTML =
'<button onclick="submitLetters()">SUBMIT LETTERS</button>';
var arrayOfTds = document.getElementsByClassName('answerLetter');
console.log(arrayOfTds);
}
//==============CREATING GRID OF RANDOM LETTERS====================
var cols = 20;
var rows = 10;
var html = "";
for(var i = 0; i <= rows; i++) {
html += '<tr>';
for(var h= 0; h <= cols; h++) {
var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';
var random = parseInt(Math.random()*characters.length);
var letter = characters.charAt(random); //returning random letter
html += '<td onclick="showSubmit()">' + letter + '</td>';
}
html += '</tr>';
}
document.getElementById('wsBox').innerHTML += html;
我想这就是你想要的:)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 30px;
height: 30px;
margin: 5px;
float: right;
background: #eee;
border: solid 1px #ccc;
list-style: none;
}
</style>
</head>
<body>
<ul></ul>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
for (var i = 0; i < 20; i++) {
$("ul").append("<li class=\"box\">" + i + "</li>");
}
$(".box").each(function(index) {
$(this).click(function() {
console.log(index);
});
});
</script>
</body>
</html>