讓一個元素對另一個元素的狀態變化做出反應

Question

我有兩個div，每個包裝8個div：

<div class="binaries">
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
</div>

<div class="numbers">
    <div class="each-number" data-value="128"> 128 </div>
    <div class="each-number" data-value="64"> 64 </div>
    <div class="each-number" data-value="32"> 32 </div>
    <div class="each-number" data-value="16"> 16 </div>
    <div class="each-number" data-value="8"> 8 </div>
    <div class="each-number" data-value="4"> 4 </div>
    <div class="each-number" data-value="2"> 2</div>
    <div class="each-number" data-value="1"> 1 </div>
 </div>

我想要實現的是，例如，單擊“數字”部分中的第一個div會更改“二進制文件”部分中的第一個div，但是我不確定如何在不向其中的每個單個div添加點擊處理程序的情況下鏈接它們數字部分。

Codepen： http ：//codepen.io/Hyde87/full/zNGXXw/

JS：

"use strict";

let count = 0;
const output = document.getElementById("output");
const gameResult = document.getElementById("gameResult");
const numbers = document.querySelector(".numbers");
const binaries = document.querySelectorAll(".binary-number");
const randomizer = document.querySelector(".randomizer");


/* Get the number value of every number on click using event delegation, then call the testValue function */
numbers.addEventListener("click", getValue);

function getValue(e){
  if (e.target.className == "each-number") {
    e.target.classList.add("light");
    let thisValue = e.target.getAttribute('data-value');
    count += parseInt(thisValue);
    console.log(count);
    testValue()
}}

   /* The values are added to the count variable, which is tested against the random number */
 function testValue(){
      if (count > parseInt(output.textContent)) {
    gameResult.textContent = "Wrong value, you went over it."
    count = 0;
    output.textContent = "";
  } else if (count === parseInt(output.textContent)) {
    gameResult.textContent = "You got it right!";
    output.textContent = "";
   }
  }

/* Gets a random number between 1 and 128 */
function getRandom() {
  return Math.floor(Math.random() * (128 - 1 + 1)) + 1;
}

/* Displays the random number and resets other values so we always start from scratch when we get a new random number */
randomizer.addEventListener("click", function() {
    gameResult.textContent = "";
    count = 0;
    output.textContent = getRandom();

    for (let i = 0; i < binaries.length; i++) {
    binaries[i].textContent = "0";
   }
 })

Answer 1

您不必在數字中的每個元素上添加click處理程序。 只需將其添加到父元素並獲得clicked事件目標的索引。

這是一個例子。

 var bin = document.getElementsByClassName('binaries')[0]; var num = document.getElementsByClassName('numbers')[0]; function numClick(evt) { var index = 0; for(var i = num.children.length - 1; i >= 0; i--) { if (evt.target == num.children[i]) { index = i; } } bin.children[index].classList.add('mark'); } num.addEventListener('click', numClick) 

 .mark { color: white; background: red; } .binaries , .numbers { display: flex; justify-content: space-between; } 

 <div class="binaries"> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> </div> <div class="numbers"> <div class="each-number" data-value="128"> 128 </div> <div class="each-number" data-value="64"> 64 </div> <div class="each-number" data-value="32"> 32 </div> <div class="each-number" data-value="16"> 16 </div> <div class="each-number" data-value="8"> 8 </div> <div class="each-number" data-value="4"> 4 </div> <div class="each-number" data-value="2"> 2</div> <div class="each-number" data-value="1"> 1 </div> </div> 

Answer 2

將類添加到二進制文件為

<div class="binaries">
    <div class="binary-number num-128"> 0 </div>
    <div class="binary-number num-64"> 0 </div>
    <div class="binary-number num-32"> 0 </div>
    <div class="binary-number num-16"> 0 </div>
    <div class="binary-number num-8"> 0 </div>
    <div class="binary-number num-4"> 0 </div>
    <div class="binary-number num-2"> 0 </div>
    <div class="binary-number num-1"> 0 </div>
  </div>

並在getValue函數中添加這兩行

let binaryElem = document.querySelector(".binary-number.num-"+thisValue);
binaryElem.textContent = "1";