javascript - 将 onClick 事件添加到 JavaScript for 循环
问题描述
我要做的是创建一个应用程序,其中有 26 个盒子,ID 为 case0、case1、case2 等。单击时,这些应将类“黑色”添加到相应的 item0、item1、item2 等。我当前的代码如下所示:
let num = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];
let guess = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];
let i,x;
let arrayShuffle = function(arr){
let newPos,temp;
for (let i = arr.length-1; i > 0; i--) {
newPos=Math.floor(Math.random()*i+1);
temp=arr[i],
arr[i]=arr[newPos];
arr[newPos]=temp;
}
return arr;
};
let numRandom = arrayShuffle(guess);
function suitCase(){
for (x = 0; x < num.length; x++) {
document.getElementById("casePanel").innerHTML+="<a href=\"#\" id=\"case"+numRandom[x]+"\"><div class=\"case\"><span>"+ num[x] + "</span></div></a>";
document.getElementById('case'+numRandom[x]).onclick=function(){clickCase();}
}
};
function clickCase(){
for(x = 0; x < num.length; x++){
document.getElementById('item'+[x]).classList.add('black');
}
}
使用此代码,我遇到了两个问题。第一类“黑色”适用于所有非单一项目,并且仅在我单击最后一个框之后。其余 25 个框在单击时不执行任何操作。其次,只有当我使用变量 numRandom[x] 时,整个数组才可见,但如果我只使用 [x] 或 num[x],则只有数组的前两个元素 0 和 1 是可见的。有人可以帮我解决这个问题并提出更好的代码吗?
这是我的html,以防有人需要参考:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Suitcase</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body onload="suitCase()">
<div class="container">
<header>
<h1>This is a sample title for this nice suitcase casino</h1>
</header>
<main class="wrap">
<!-- Left price panel -->
<div class="left-panel">
<ul>
<?php
$priceL = [".01","1","5","10","25","50","75","100","200","300","400","500","750"];
for($i=0;$i<count($priceL);$i++){
echo "<li id=\"item$i\">$".$priceL[$i],"</li>";
}
?>
</ul>
</div>
<!-- ./Left price panel -->
<div class="case-panel" id="casePanel">
</div>
<!-- Right price panel -->
<div class="right-panel">
<ul>
<?php
$priceR = ["1000","5000","10,000","25,000","50,000","75,000","100,000","200,000","300,000","400,000","500,000","750,000","1,000,000"];
$x = 13;
for($i=0;$i<count($priceR);$i++){
echo "<li id=\"item$x\">$".$priceR[$i],"</li>";
$x++;
}
?>
</ul>
</div>
<!-- ./Right price panel -->
</main>
<footer></footer>
</div>
</body>
</html>
解决方案
该onclick
函数应该获取被点击元素的 ID。然后替换case
为item
以获取相应的项目,并将其作为参数传递给clickCase()
.
只有最后一项是可点击的原因是因为您document.getElementById("casePanel").innerHTML
每次都在通过循环重写。这将重新创建所有元素,因此所有先前的元素不再具有其单击处理程序。
您可以使用insertAdjacentHTML()
将 HTML 添加到元素,而无需重新解析它已包含的内容。
let num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25];
let guess = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25];
let i, x;
let arrayShuffle = function(arr) {
let newPos, temp;
for (let i = arr.length - 1; i > 0; i--) {
newPos = Math.floor(Math.random() * i + 1);
temp = arr[i],
arr[i] = arr[newPos];
arr[newPos] = temp;
}
return arr;
};
let numRandom = arrayShuffle(guess);
suitCase();
function suitCase() {
for (x = 0; x < num.length; x++) {
document.getElementById("casePanel").insertAdjacentHTML('beforeend', "<a href=\"#\" id=\"case" + numRandom[x] + "\"><div class=\"case\"><span>" + num[x] + "</span></div></a>");
document.getElementById('case' + numRandom[x]).onclick = function() {
clickCase(this.id.replace('case', 'item'));
}
}
};
function clickCase(id) {
document.getElementById(id).classList.add('black');
}
.black {
background-color: blue;
}
<div class="container">
<header>
<h1>This is a sample title for this nice suitcase casino</h1>
</header>
<main class="wrap">
<!-- Left price panel -->
<div class="left-panel">
<ul>
<li id="item0">$.01</li>
<li id="item1">$1</li>
<li id="item2">$5</li>
<li id="item3">$10</li>
<li id="item4">$25</li>
<li id="item5">$50</li>
<li id="item6">$75</li>
<li id="item7">$100</li>
<li id="item8">$200</li>
<li id="item9">$300</li>
<li id="item10">$400</li>
<li id="item11">$500</li>
<li id="item12">$750</li>
</ul>
</div>
<!-- ./Left price panel -->
<div class="case-panel" id="casePanel">
</div>
<!-- Right price panel -->
<div class="right-panel">
<ul>
<li id="item13">$1000</li>
<li id="item14">$5000</li>
<li id="item15">$10,000</li>
<li id="item16">$25,000</li>
<li id="item17">$50,000</li>
<li id="item18">$75,000</li>
<li id="item19">$100,000</li>
<li id="item20">$200,000</li>
<li id="item21">$300,000</li>
<li id="item22">$400,000</li>
<li id="item23">$500,000</li>
<li id="item24">$750,000</li>
<li id="item25">$1,000,000</li>
</ul>
</div>
<!-- ./Right price panel -->
</main>
<footer></footer>
</div>
推荐阅读
- python - pytorch 训练函数变量和张量(阅读我的介绍,我也不知道我的问题,它只是不起作用)
- xml - 忽略空的 xml 标签
- python - TypeError:'dict'和'dict'的实例之间不支持'<':Python 3 Conversion?
- android - 如何禁用 GridView 被 PopupWindow 滚动
- php - Facade\Ignition\Exceptions\ViewException?
- javascript - 如何获取cherrypy函数的结果?
- apify - 如果运行成功,则下载最新结果
- java - ArrayList 错误:大小相同,在 remove() 之后包含“空”元素
- android - 处理 viewModel 上的内部 Transformations.switchMap
- java - Google TINK - 流式传输 AEAD 始终返回 1 KB 的输出文件