如果数组具有相应值，则为特定单元格着色答案

【问题标题】：Color specific cells that if array has corresponding values如果数组具有相应值，则为特定单元格着色
【发布时间】：2021-04-25 16:23:06
【问题描述】：

我正在尝试用对应于数组值的黄色为所有单元格着色。例如下图中所有的数字 1-12 都是可点击的并且有自己的功能。

当我单击 1 时，该函数会生成 1-25 的 4 个数字并将其存储在数组中。假设数字是 2,5,8,10。所以单元格 2、5、8、10 应该被涂成黄色。如何为数组值对应的单元格着色。

我的单元格具有代表其价值的 id。所以数字 1 的 id 是 '1' 等等。我想不出任何办法。

function func1() {
  var random = [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];
  var selection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var numbers = [];
  for (i = 0; i < 4; i++) {
    var randomPositionl = Math.floor(Math.random() * random.length);
    var final = random.splice(randomPositionl, 1);
    console.log(final);
  }
}

function func2() {
  console.log(2);
}


function func3() {
  console.log(3);
}

function func4() {
  console.log(4);
}

function func5() {
  console.log(5);
}

function func6() {
  console.log(6);
}

function func7() {
  console.log(7);
}

function func8() {
  console.log(8);
}

function func9() {
  console.log(9);
}

function func10() {
  console.log(10);
}

function func11() {
  console.log(11);
}

function func12() {
  console.log(12);
}

table {
  font-family: arial, sans-serif;
  font-size: 16px;
  border-collapse: collapse;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  text-align: center;
  cursor: pointer;
  color: white;
  float: left;
  text-shadow: 2px 2px 4px #000000;
  background-color: black;
}

td {
  border: 2px #a49e9b solid;
}

td:hover {
  background-color: yellow;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <table cellpadding="15" cellspacing="15">
    <tr>
      <td id="1" onclick="func1()">1</td>
      <td id="3" onclick="func3()">3</td>
      <td id="5" onclick="func5()">5</td>
      <td id="7" onclick="func7()">7</td>
      <td id="9" onclick="func9()">9</td>
      <td id="11" onclick="func11()">11</td>
    </tr>
    <tr>
      <td id="2" onclick="func2()">2</td>
      <td id="4" onclick="func4()">4</td>
      <td id="6" onclick="func6()">6</td>
      <td id="8" onclick="func8()">8</td>
      <td id="10" onclick="func10()">10</td>
      <td id="12" onclick="func12()">12</td>
    </tr>
  </table>
</body>

</html>

【问题讨论】：

标签： javascript arrays

【解决方案1】：

const previous = [];
function func1() {
  var random = [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];
  var selection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var numbers = [];
  previous.map(n =>{
    const e = document.querySelector(`#id${n}`);
    if(!e || !e.style ) return;
     e.style.removeProperty('background') ;});
previous.length = 0;

  for (i = 0; i < 4; i++) {
    var randomPositionl = Math.floor(Math.random() * random.length);
    var n =random[randomPositionl];
    
    previous.push(n);
    const e = document.querySelector(`#id${n}`);
    if(!e || !e.style) continue;
     e.style.setProperty('background', 'yellow');
    
  }
}

function func2() {
  console.log(2);
}


function func3() {
  console.log(3);
}

function func4() {
  console.log(4);
}

function func5() {
  console.log(5);
}

function func6() {
  console.log(6);
}

function func7() {
  console.log(7);
}

function func8() {
  console.log(8);
}

function func9() {
  console.log(9);
}

function func10() {
  console.log(10);
}

function func11() {
  console.log(11);
}

function func12() {
  console.log(12);
}

table {
  font-family: arial, sans-serif;
  font-size: 16px;
  border-collapse: collapse;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  text-align: center;
  cursor: pointer;
  color: white;
  float: left;
  text-shadow: 2px 2px 4px #000000;
  background-color: black;
}

td {
  border: 2px #a49e9b solid;
}

td:hover {
  background-color: yellow;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <table cellpadding="15" cellspacing="15">
    <tr>
      <td id="id1" onclick="func1()">1</td>
      <td id="id3" onclick="func3()">3</td>
      <td id="id5" onclick="func5()">5</td>
      <td id="id7" onclick="func7()">7</td>
      <td id="id9" onclick="func9()">9</td>
      <td id="id11" onclick="func11()">11</td>
    </tr>
    <tr>
      <td id="id2" onclick="func2()">2</td>
      <td id="id4" onclick="func4()">4</td>
      <td id="id6" onclick="func6()">6</td>
      <td id="id8" onclick="func8()">8</td>
      <td id="id10" onclick="func10()">10</td>
      <td id="id12" onclick="func12()">12</td>
    </tr>
  </table>
</body>

</html>

【讨论】：

请发表评论并告诉我们代码改进了什么！
@Steward 请你说这段代码的作用与你的要求完全匹配吗？

【解决方案2】：

也许你是这个意思？

我觉得你这里的数组太多了

const tb = document.getElementById("tb");
const cells = tb.querySelectorAll("td")
tb.addEventListener("click",func)

function func(e) {
  tgt = e.target;
  
  var final = []
  var numbers = [];
  for (i = 0; i < 4; i++) {
    var randomPositionl = Math.floor(Math.random() * cells.length);
    final.push(randomPositionl);
  }
    console.log(final);
  const num = +tgt.id; 
  console.log(num)
  cells.forEach((cell,i) => cell.classList.toggle("yellow",final.includes(i)))

}

table {
  font-family: arial, sans-serif;
  font-size: 16px;
  border-collapse: collapse;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  text-align: center;
  cursor: pointer;
  color: white;
  float: left;
  text-shadow: 2px 2px 4px #000000;
  background-color: black;
}

td {
  border: 2px #a49e9b solid;
}

td:hover {
  background-color: yellow;
}

.yellow {
  background-color: yellow;
}

<table cellpadding="15" cellspacing="15">
  <tbody id="tb">
    <tr>
      <td id="1">1</td>
      <td id="3">3</td>
      <td id="5">5</td>
      <td id="7">7</td>
      <td id="9">9</td>
      <td id="11">11</td>
    </tr>
    <tr>
      <td id="2">2</td>
      <td id="4">4</td>
      <td id="6">6</td>
      <td id="8">8</td>
      <td id="10">10</td>
      <td id="12">12</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

我会建议你另一种方式来实现它。

function func1(td) {
  let randomColor = Math.floor(Math.random()*16777215).toString(16); // hexa code
  td.style.backgroundColor = randomColor ;  // fixing td background color 
  
}

并用这个更新你的html：

<table cellpadding="15" cellspacing="15">
<tr>
  <td id="1" onclick="func1(this)">1</td>
  <td id="3" onclick="func3(this)">3</td>
  <td id="5" onclick="func5(this)">5</td>
  <td id="7" onclick="func7(this)">7</td>
  <td id="9" onclick="func9(this)">9</td>
  <td id="11" onclick="func11(this)">11</td>
</tr>
<tr>
  <td id="2" onclick="func2(this)">2</td>
  <td id="4" onclick="func4(this)">4</td>
  <td id="6" onclick="func6(this)">6</td>
  <td id="8" onclick="func8(this)">8</td>
  <td id="10" onclick="func10(this)">10</td>
  <td id="12" onclick="func12(this)">12</td>
</tr>

【讨论】：

【解决方案4】：

您始终可以使用querySelectorAll() 获取您的方形选择器，然后获取它们的键并将它们放入一个数组中。然后将该索引值数组运行到一个辅助函数中，该函数将返回 4 个随机索引。然后在索引数组的循环中检查这些索引以获取与这些索引匹配的元素并将它们的背景颜色设置为黄色。

const cont = document.querySelector('.grid-container')
const squares = cont.querySelectorAll('.squares')

const index = []
for (const key of squares.keys()) {
  index.push(key);
}
// helper function to return random unique values into an array
const getRan = (arr, count) => {
  let temp = arr.slice(arr);
  let ret = []
  // lets get unique values that will never match out of the array
  for (let i = 0; i < count; i++) {
    let index = Math.floor(Math.random() * temp.length);
    let removed = temp.splice(index, 1);
    ret.push(removed[0]);
  }
  return ret;
}

let turn = true;
squares.forEach(sq => {
  sq.addEventListener('click', function() {
    if (turn !== false) {
      getRan(index, 4).forEach(num => {
        console.log(num)
        squares[num].style.backgroundColor = 'yellow'
        turn = false;
      })
    }
  })
})

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  width: 120px;
  height: 120px;
  grid-template-areas: "three six nine twelve" "two five eight eleven" "one four seven ten" "first first first first";
}

.squares {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px grey;
  color: white;
  background-color: black;
}

.squares:nth-child(odd) {
  background-color: red;
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}

.five {
  grid-area: five;
}

.six {
  grid-area: six;
}

.seven {
  grid-area: seven;
}

.eight {
  grid-area: eight;
}

.nine {
  grid-area: nine;
}

.ten {
  grid-area: ten;
}

.eleven {
  grid-area: eleven;
}

.twelve {
  grid-area: twelve;
}

.first {
  grid-area: first;
}

<div class="grid-container">
  <div data-id="1" class="squares one">1</div>
  <div data-id="2" class="squares two">2</div>
  <div data-id="3" class="squares three">3</div>
  <div data-id="4" class="squares four">4</div>
  <div data-id="5" class="squares five">5</div>
  <div data-id="6" class="squares six">6</div>
  <div data-id="7" class="squares seven">7</div>
  <div data-id="8" class="squares eight">8</div>
  <div data-id="9" class="squares nine">9</div>
  <div data-id="10" class="squares ten">10</div>
  <div data-id="11" class="squares eleven">11</div>
  <div data-id="12" class="squares twelve">12</div>
  <div class="first"></div>
</div>

【讨论】：