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处理程序。只需将其添加到父元素并获取所单击事件目标的索引。

这是一个例子。

＆＃13;

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)

＆＃13;

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

＆＃13;

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

＆＃13;

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

让元素对另一个元素的状态变化作出反应

2 个答案: