将onClick事件添加到JavaScript以进行循环

问题描述 投票：1回答：1

[我正在尝试创建一个应用程序，其中有26个ID为case0，case1，case2等的盒子。单击时，这些应将类“ 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');
    }
}

使用此代码，我遇到两个问题。头等舱“黑色”应用于所有非单个项目，并且仅在单击最后一个框后才适用。单击时，其余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>
javascript php for-loop onclick event-listener
1个回答
0
投票

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.