将 onClick 事件添加到 JavaScript for 循环

Question

我想做的是创建一个应用程序，其中有 26 个盒子，id 为 case0、case1、case2 等等。单击时，这些应将 class 'black' 添加到相应的 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');
    }
}

使用这段代码我遇到了两个问题。首先 class '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>

Answer 1

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"></li>
        <li id="item2"></li>
        <li id="item3"></li>
        <li id="item4"></li>
        <li id="item5"></li>
        <li id="item6"></li>
        <li id="item7">0</li>
        <li id="item8">0</li>
        <li id="item9">0</li>
        <li id="item10">0</li>
        <li id="item11">0</li>
        <li id="item12">0</li>
      </ul>
    </div>
    <!-- ./Left price panel -->

    <div class="case-panel" id="casePanel">

    </div>

    <!-- Right price panel -->
    <div class="right-panel">
      <ul>
        <li id="item13">00</li>
        <li id="item14">00</li>
        <li id="item15">,000</li>
        <li id="item16">,000</li>
        <li id="item17">,000</li>
        <li id="item18">,000</li>
        <li id="item19">0,000</li>
        <li id="item20">0,000</li>
        <li id="item21">0,000</li>
        <li id="item22">0,000</li>
        <li id="item23">0,000</li>
        <li id="item24">0,000</li>
        <li id="item25">,000,000</li>
      </ul>
    </div>
    <!-- ./Right price panel -->
  </main>

  <footer></footer>
</div>

将 onClick 事件添加到 JavaScript for 循环

adding onClick event to JavaScript for loop

javascript

php

for-loop

onclick

event-listener