javascript - 让一个元素对另一个元素的状态变化使用react

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。

代码笔: 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

将类添加到二进制文件

<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";