javascript - 单击时多次(循环)更改 Div 背景颜色

标签 javascript jquery html css

你好，Stacokoverflowers!

我有一个 div wrapper ，里面有 52 个盒子，还有一个大盒子，里面有一封信。围绕大字母的最小字母，我已经使用 css 网格完成了此操作，现在如果我将鼠标悬停在那些小字母上，它会变成浅灰色。

我想要实现的目标

单击(任何 52 个小框)时，背景应首先变为绿色，如果我再次单击同一个框的顶部，背景应变为红色。当为红色或绿色时，应禁用悬停状态(灰色)。如果您第三次单击，背景应恢复为白色。并且应该再次启用灰色悬停选项。

我在每个框上还有一个数据属性，其状态为“defaultWhite”，我想在单击该框时将其更改为红色或绿色或返回到defaultWhite。所以背景数据上的背景颜色被更新。 |

因为我计划稍后将此数据导出到 Excel 文档。

const changeColor = document.getElementById('changeColor'),
  colors = ['green', 'red', 'white'];
let colorIndex = 0;

changeColor.addEventListener('click', () => {
  document.this.style.backgroundColor = colors[colorIndex];
  colorIndex = (colorIndex + 1) % colors.length
});
html {
  -webkit-font-smoothing: antialiased;
}

body {
  background: #fff;
  margin: 0 auto;
  padding: 1em;
}

.generalWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: ;
  position:
}

.boxes-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1280px;
  background-color: ;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "Title Title Title Title Title Title Title Title Title Title Title Title Title Title" "sheW1 sheW2 sheW3 sheW4 sheW5 sheW6 sheW7 sheW8 sheW9 sheW10 sheW11 sheW12 sheW13 sheW14" "sheW52 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW15" "sheW51 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW16" "sheW50 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW17" "sheW49 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW18" "sheW48 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW19" "sheW47 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW20" "sheW46 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW21" "sheW45 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW22" "sheW44 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW23" "sheW43 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW24" "sheW42 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW25" "sheW41 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW26" "sheW40 sheW39 sheW38 sheW37 sheW36 sheW35 sheW34 sheW33 sheW32 sheW31 sheW30 sheW29 sheW28 sheW27";
  width: 300px;
  height: 320px;
  font-family: sans-serif, helvetica;
  background-color: white;
  background-color: ;
}

.Title {
  grid-area: Title;
  text-align: center;
  background-color: darkslateblue;
  color: white;
  font-size: 1em;
  padding: 5px 0px;
  font-weight: 600;
}

.sheW1 {
  grid-area: sheW1;
  text-align: center;
}

.sheW2 {
  grid-area: sheW2;
  text-align: center;
}

.sheW3 {
  grid-area: sheW3;
  text-align: center;
}

.sheW4 {
  grid-area: sheW4;
  text-align: center;
}

.sheW5 {
  grid-area: sheW5;
  text-align: center;
}

.sheW6 {
  grid-area: sheW6;
  text-align: center;
}

.sheW7 {
  grid-area: sheW7;
  text-align: center;
}

.sheW8 {
  grid-area: sheW8;
  text-align: center;
}

.sheW9 {
  grid-area: sheW9;
  text-align: center;
}

.sheW10 {
  grid-area: sheW10;
  text-align: center;
}

.sheW11 {
  grid-area: sheW11;
  text-align: center;
}

.sheW12 {
  grid-area: sheW12;
  text-align: center;
}

.sheW13 {
  grid-area: sheW13;
  text-align: center;
}

.sheW14 {
  grid-area: sheW14;
  text-align: center;
}

.sheW15 {
  grid-area: sheW15;
  border: 1px solid black;
  text-align: center;
}

.sheW16 {
  grid-area: sheW16;
  border: 1px solid black;
  text-align: center;
}

.sheW17 {
  grid-area: sheW17;
  text-align: center;
}

.sheW18 {
  grid-area: sheW18;
  text-align: center;
}

.sheW19 {
  grid-area: sheW19;
  text-align: center;
}

.sheW20 {
  grid-area: sheW20;
  text-align: center;
}

.sheW21 {
  grid-area: sheW21;
  border: 1px solid black;
  text-align: center;
}

.sheW22 {
  grid-area: sheW22;
  text-align: center;
}

.sheW23 {
  grid-area: sheW23;
  text-align: center;
}

.sheW24 {
  grid-area: sheW24;
  text-align: center;
}

.sheW25 {
  grid-area: sheW25;
  border: 1px solid black;
  text-align: center;
}

.sheW26 {
  grid-area: sheW26;
  text-align: center;
}

.sheW27 {
  grid-area: sheW27;
  text-align: center;
}

.sheW28 {
  grid-area: sheW28;
  text-align: center;
}

.sheW29 {
  grid-area: sheW29;
  text-align: center;
}

.sheW30 {
  grid-area: sheW30;
  border: 1px solid black;
  text-align: center;
}

.sheW31 {
  grid-area: sheW31;
  text-align: center;
}

.sheW32 {
  grid-area: sheW32;
  text-align: center;
}

.sheW33 {
  grid-area: sheW33;
  text-align: center;
}

.sheW34 {
  grid-area: sheW34;
  text-align: center;
}

.sheW35 {
  grid-area: sheW35;
  text-align: center;
}

.sheW36 {
  grid-area: sheW36;
  text-align: center;
}

.sheW37 {
  grid-area: sheW37;
  text-align: center;
}

.sheW38 {
  grid-area: sheW38;
  text-align: center;
}

.sheW39 {
  grid-area: sheW39;
  text-align: center;
}

.sheW40 {
  grid-area: sheW40;
  text-align: center;
}

.sheW41 {
  grid-area: sheW41;
  text-align: center;
}

.sheW42 {
  grid-area: sheW42;
  text-align: center;
}

.sheW43 {
  grid-area: sheW43;
  text-align: center;
}

.sheW44 {
  grid-area: sheW44;
  text-align: center;
}

.sheW45 {
  grid-area: sheW45;
  text-align: center;
}

.sheW46 {
  grid-area: sheW46;
  text-align: center;
}

.sheW47 {
  grid-area: sheW47;
  text-align: center;
}

.sheW48 {
  grid-area: sheW48;
  border: 1px solid black;
  text-align: center;
}

.sheW49 {
  grid-area: sheW49;
  text-align: center;
}

.sheW50 {
  grid-area: sheW50;
  text-align: center;
}

.sheW51 {
  grid-area: sheW51;
  text-align: center;
}

.sheW52 {
  grid-area: sheW52;
  text-align: center;
}

.Letter {
  grid-area: Letter;
  border: 1px solid darkgrey;
  text-align: center;
}

.letterCenter {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 130px;
}

#changeColor {
  border: 1px solid darkgrey;
  font-size: 11px;
  display: flex;
  position: relative;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: darkgrey;
  font-weight: bold;
}

#changeColor:hover {
  cursor: pointer;
  background-color: darkgrey;
  color: white;
}

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .Title {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 14;
  }
  .sheW1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW2 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .sheW3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .sheW4 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }
  .sheW5 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }
  .sheW6 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }
  .sheW7 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }
  .sheW8 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }
  .sheW9 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }
  .sheW10 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }
  .sheW11 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }
  .sheW12 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }
  .sheW13 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }
  .sheW14 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW15 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW16 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW17 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW18 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW19 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW20 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW21 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW22 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW23 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW24 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW25 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW26 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW27 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW28 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }
  .sheW29 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }
  .sheW30 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }
  .sheW31 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }
  .sheW32 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }
  .sheW33 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }
  .sheW34 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }
  .sheW35 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }
  .sheW36 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }
  .sheW37 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }
  .sheW38 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .sheW39 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .sheW40 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW41 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW42 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW43 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW44 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW45 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW46 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW47 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW48 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW49 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW50 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW51 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW52 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .Letter {
    -ms-grid-row: 3;
    -ms-grid-row-span: 12;
    -ms-grid-column: 2;
    -ms-grid-column-span: 12;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>S test</title>
  <meta name="description" content="S test">
  <link rel="stylesheet" href="styles/main.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
</head>

<body>
  <div class="generalWrapper">
    <div class="boxes-container">
      <div class="grid-container">
        <div class="Title">SHE</div>
        <div id="changeColor" class="sheW1" data="defaultWhite">1</div>
        <div id="changeColor" class="sheW2" data="defaultWhite">2</div>
        <div id="changeColor" class="sheW3" data="defaultWhite">3</div>
        <div id="changeColor" class="sheW4" data="defaultWhite">4</div>
        <div id="changeColor" class="sheW5" data="defaultWhite">5</div>
        <div id="changeColor" class="sheW6" data="defaultWhite">6</div>
        <div id="changeColor" class="sheW7" data="defaultWhite">7</div>
        <div id="changeColor" class="sheW8" data="defaultWhite">8</div>
        <div id="changeColor" class="sheW9" data="defaultWhite">9</div>
        <div id="changeColor" class="sheW10" data="defaultWhite">10</div>
        <div id="changeColor" class="sheW11" data="defaultWhite">11</div>
        <div id="changeColor" class="sheW12" data="defaultWhite">12</div>
        <div id="changeColor" class="sheW13" data="defaultWhite">13</div>
        <div id="changeColor" class="sheW14" data="defaultWhite">14</div>
        <div id="changeColor" class="sheW15" data="defaultWhite">15</div>
        <div id="changeColor" class="sheW16" data="defaultWhite">16</div>
        <div id="changeColor" class="sheW17" data="defaultWhite">17</div>
        <div id="changeColor" class="sheW18" data="defaultWhite">18</div>
        <div id="changeColor" class="sheW19" data="defaultWhite">19</div>
        <div id="changeColor" class="sheW20" data="defaultWhite">20</div>
        <div id="changeColor" class="sheW21" data="defaultWhite">21</div>
        <div id="changeColor" class="sheW22" data="defaultWhite">22</div>
        <div id="changeColor" class="sheW23" data="defaultWhite">23</div>
        <div id="changeColor" class="sheW24" data="defaultWhite">24</div>
        <div id="changeColor" class="sheW25" data="defaultWhite">25</div>
        <div id="changeColor" class="sheW26" data="defaultWhite">26</div>
        <div id="changeColor" class="sheW27" data="defaultWhite">27</div>
        <div id="changeColor" class="sheW28" data="defaultWhite">28</div>
        <div id="changeColor" class="sheW29" data="defaultWhite">29</div>
        <div id="changeColor" class="sheW30" data="defaultWhite">30</div>
        <div id="changeColor" class="sheW31" data="defaultWhite">31</div>
        <div id="changeColor" class="sheW32" data="defaultWhite">32</div>
        <div id="changeColor" class="sheW33" data="defaultWhite">33</div>
        <div id="changeColor" class="sheW34" data="defaultWhite">34</div>
        <div id="changeColor" class="sheW35" data="defaultWhite">35</div>
        <div id="changeColor" class="sheW36" data="defaultWhite">36</div>
        <div id="changeColor" class="sheW37" data="defaultWhite">37</div>
        <div id="changeColor" class="sheW38" data="defaultWhite">38</div>
        <div id="changeColor" class="sheW39" data="defaultWhite">39</div>
        <div id="changeColor" class="sheW40" data="defaultWhite">40</div>
        <div id="changeColor" class="sheW41" data="defaultWhite">41</div>
        <div id="changeColor" class="sheW42" data="defaultWhite">42</div>
        <div id="changeColor" class="sheW43" data="defaultWhite">43</div>
        <div id="changeColor" class="sheW44" data="defaultWhite">44</div>
        <div id="changeColor" class="sheW45" data="defaultWhite">45</div>
        <div id="changeColor" class="sheW46" data="defaultWhite">46</div>
        <div id="changeColor" class="sheW47" data="defaultWhite">47</div>
        <div id="changeColor" class="sheW48" data="defaultWhite">48</div>
        <div id="changeColor" class="sheW48" data="defaultWhite">48</div>
        <div id="changeColor" class="sheW48" data="defaultWhite">48</div>
        <div id="changeColor" class="sheW49" data="defaultWhite">49</div>
        <div id="changeColor" class="sheW50" data="defaultWhite">50</div>
        <div id="changeColor" class="sheW51" data="defaultWhite">51</div>
        <div id="changeColor" class="sheW52" data="defaultWhite">52</div>
        <div class="Letter">
          <div class="letterCenter">S</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

链接到JsFiddle

谁能帮我实现循环颜色变化和点击时数据更新？ :)

最佳答案

首先您应该知道 id 对于元素来说必须是唯一的，并且 class 可以重用。因此，请切换您的classes和ids。

我会为每个状态使用不同的类，并在每次点击时在它们之间切换。

const changeColor = document.getElementsByClassName('changeColor');

Array.from(changeColor).forEach(function(element) {
  element.addEventListener('click', function(event) {
  	item = event.target;
    
    if (item.classList.contains('green')) {
        item.classList.remove('green');
        item.classList.add('red');
    } else if(item.classList.contains('red')) {
        item.classList.remove('red');
        item.classList.add('enableHover');
    } else {
        item.classList.add('green');
        item.classList.remove('enableHover');
    }
  });
});
html {
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    margin: 0 auto;
    padding: 1em;
}

.generalWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: ;
    position:
}

.boxes-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1280px;
    background-color: ;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "Title Title Title Title Title Title Title Title Title Title Title Title Title Title" "sheW1 sheW2 sheW3 sheW4 sheW5 sheW6 sheW7 sheW8 sheW9 sheW10 sheW11 sheW12 sheW13 sheW14" "sheW52 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW15" "sheW51 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW16" "sheW50 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW17" "sheW49 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW18" "sheW48 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW19" "sheW47 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW20" "sheW46 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW21" "sheW45 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW22" "sheW44 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW23" "sheW43 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW24" "sheW42 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW25" "sheW41 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW26" "sheW40 sheW39 sheW38 sheW37 sheW36 sheW35 sheW34 sheW33 sheW32 sheW31 sheW30 sheW29 sheW28 sheW27";
    width: 300px;
    height: 320px;
    font-family: sans-serif, helvetica;
    background-color: white;
    background-color: ;
}

.Title {
    grid-area: Title;
    text-align: center;
    background-color:darkslateblue;
    color: white;
    font-size: 1em;
    padding: 5px 0px;
    font-weight: 600;
}

#sheW1 { grid-area: sheW1;
text-align: center;
}

#sheW2 { grid-area: sheW2;
text-align: center;
}

#sheW3 { grid-area: sheW3;
text-align: center;
}

#sheW4 { grid-area: sheW4;
text-align: center;
}

#sheW5 { grid-area: sheW5;
text-align: center;
}

#sheW6 { grid-area: sheW6;
text-align: center;
}

#sheW7 { grid-area: sheW7;
text-align: center;
}

#sheW8 { grid-area: sheW8;
text-align: center;
}

#sheW9 { grid-area: sheW9;
text-align: center;
}

#sheW10 { grid-area: sheW10;
text-align: center;
}

#sheW11 { grid-area: sheW11;
text-align: center;
}

#sheW12 { grid-area: sheW12;
text-align: center;
}

#sheW13 { grid-area: sheW13;
text-align: center;
}

#sheW14 { grid-area: sheW14;
text-align: center;
}

#sheW15 { grid-area: sheW15;
border: 1px solid black;
text-align: center;
}

#sheW16 { grid-area: sheW16;
border: 1px solid black;
text-align: center;
}

#sheW17 { grid-area: sheW17;
text-align: center;
}

#sheW18 { grid-area: sheW18;
text-align: center;
}

#sheW19 { grid-area: sheW19;
text-align: center;
}

#sheW20 { grid-area: sheW20;
text-align: center;
}

#sheW21 { grid-area: sheW21;
border: 1px solid black;
text-align: center;}

#sheW22 { grid-area: sheW22;
text-align: center;
}

#sheW23 { grid-area: sheW23;
text-align: center;
}

#sheW24 { grid-area: sheW24;
text-align: center;
}

#sheW25 { grid-area: sheW25;
border: 1px solid black;
text-align: center;}

#sheW26 { grid-area: sheW26;
text-align: center;
}

#sheW27 { grid-area: sheW27;
text-align: center;
}

#sheW28 { grid-area: sheW28;
text-align: center;
}

#sheW29 { grid-area: sheW29;
text-align: center;
}

#sheW30 { grid-area: sheW30;
border: 1px solid black;
text-align: center;
}

#sheW31 { grid-area: sheW31;
text-align: center;
}

#sheW32 { grid-area: sheW32;
text-align: center;
}

#sheW33 { grid-area: sheW33;
text-align: center;
}

#sheW34 { grid-area: sheW34;
text-align: center;
}

#sheW35 { grid-area: sheW35;
text-align: center;
}

#sheW36 { grid-area: sheW36;
text-align: center;
}

#sheW37 { grid-area: sheW37;
text-align: center;
}

#sheW38 { grid-area: sheW38;
text-align: center;
}

#sheW39 { grid-area: sheW39;
text-align: center;
}

#sheW40 { grid-area: sheW40;
text-align: center;
}

#sheW41 { grid-area: sheW41;
text-align: center;
}

#sheW42 { grid-area: sheW42;
text-align: center;
}

#sheW43 { grid-area: sheW43;
text-align: center;
}

#sheW44 { grid-area: sheW44;
text-align: center;
}

#sheW45 { grid-area: sheW45;
text-align: center;
}

#sheW46 { grid-area: sheW46;
text-align: center;
}

#sheW47 { grid-area: sheW47;
text-align: center;
}

#sheW48 { grid-area: sheW48;
border: 1px solid black;
text-align: center;
}

#sheW49 { grid-area: sheW49;
text-align: center;
}

#sheW50 { grid-area: sheW50;
text-align: center;
}

#sheW51 { grid-area: sheW51;
text-align: center;
}

#sheW52 { grid-area: sheW52;
text-align: center;
}

.Letter { grid-area: Letter;
border: 1px solid darkgrey;
text-align: center;}

.letterCenter {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 130px;
}

.changeColor {
    border: 1px solid darkgrey;
    font-size: 11px;
    display: flex;
    position: relative;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: darkgrey;
    font-weight: bold;
}

.changeColor {
    cursor: pointer;
}

.enableHover:hover {
    background-color:darkgrey;
    color: white;
}

.changeColor.green {
    background-color:green;
}

.changeColor.red {
    background-color:red;
}

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .Title {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 14;
  }

  #sheW1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW2 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  #sheW3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  #sheW4 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  #sheW5 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }

  #sheW6 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }

  #sheW7 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }

  #sheW8 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }

  #sheW9 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }

  #sheW10 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }

  #sheW11 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }

  #sheW12 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }

  #sheW13 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }

  #sheW14 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW15 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW16 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW17 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW18 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW19 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW20 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW21 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW22 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW23 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW24 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW25 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW26 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW27 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW28 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }

  #sheW29 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }

  #sheW30 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }

  #sheW31 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }

  #sheW32 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }

  #sheW33 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }

  #sheW34 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }

  #sheW35 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }

  #sheW36 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }

  #sheW37 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  #sheW38 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  #sheW39 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  #sheW40 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW41 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW42 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW43 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW44 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW45 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW46 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW47 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW48 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW49 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW50 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW51 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW52 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .Letter {
    -ms-grid-row: 3;
    -ms-grid-row-span: 12;
    -ms-grid-column: 2;
    -ms-grid-column-span: 12;
  }

}
<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>S test</title>
        <meta name="description" content="S test">
        <link rel="stylesheet" href="styles/main.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    </head>
    <body>
    <div class="generalWrapper">  
      <div class="boxes-container">  
        <div class="grid-container">
          <div class="Title">SHE</div>
          <div class="changeColor enableHover" id="sheW1" data="defaultWhite">1</div>
          <div class="changeColor enableHover" id="sheW2" data="defaultWhite">2</div>
          <div class="changeColor enableHover" id="sheW3" data="defaultWhite">3</div>
          <div class="changeColor enableHover" id="sheW4" data="defaultWhite">4</div>
          <div class="changeColor enableHover" id="sheW5" data="defaultWhite">5</div>
          <div class="changeColor enableHover" id="sheW6" data="defaultWhite">6</div>
          <div class="changeColor enableHover" id="sheW7" data="defaultWhite">7</div>
          <div class="changeColor enableHover" id="sheW8" data="defaultWhite">8</div>
          <div class="changeColor enableHover" id="sheW9" data="defaultWhite">9</div>
          <div class="changeColor enableHover" id="sheW10" data="defaultWhite">10</div>
          <div class="changeColor enableHover" id="sheW11" data="defaultWhite">11</div>
          <div class="changeColor enableHover" id="sheW12" data="defaultWhite">12</div>
          <div class="changeColor enableHover" id="sheW13" data="defaultWhite">13</div>
          <div class="changeColor enableHover" id="sheW14" data="defaultWhite">14</div>
          <div class="changeColor enableHover" id="sheW15" data="defaultWhite">15</div>
          <div class="changeColor enableHover" id="sheW16" data="defaultWhite">16</div>
          <div class="changeColor enableHover" id="sheW17" data="defaultWhite">17</div>
          <div class="changeColor enableHover" id="sheW18" data="defaultWhite">18</div>
          <div class="changeColor enableHover" id="sheW19" data="defaultWhite">19</div>
          <div class="changeColor enableHover" id="sheW20" data="defaultWhite">20</div>
          <div class="changeColor enableHover" id="sheW21" data="defaultWhite">21</div>
          <div class="changeColor enableHover" id="sheW22" data="defaultWhite">22</div>
          <div class="changeColor enableHover" id="sheW23" data="defaultWhite">23</div>
          <div class="changeColor enableHover" id="sheW24" data="defaultWhite">24</div>
          <div class="changeColor enableHover" id="sheW25" data="defaultWhite">25</div>
          <div class="changeColor enableHover" id="sheW26" data="defaultWhite">26</div>
          <div class="changeColor enableHover" id="sheW27" data="defaultWhite">27</div>
          <div class="changeColor enableHover" id="sheW28" data="defaultWhite">28</div>
          <div class="changeColor enableHover" id="sheW29" data="defaultWhite">29</div>
          <div class="changeColor enableHover" id="sheW30" data="defaultWhite">30</div>
          <div class="changeColor enableHover" id="sheW31" data="defaultWhite">31</div>
          <div class="changeColor enableHover" id="sheW32" data="defaultWhite">32</div>
          <div class="changeColor enableHover" id="sheW33" data="defaultWhite">33</div>
          <div class="changeColor enableHover" id="sheW34" data="defaultWhite">34</div>
          <div class="changeColor enableHover" id="sheW35" data="defaultWhite">35</div>
          <div class="changeColor enableHover" id="sheW36" data="defaultWhite">36</div>
          <div class="changeColor enableHover" id="sheW37" data="defaultWhite">37</div>
          <div class="changeColor enableHover" id="sheW38" data="defaultWhite">38</div>
          <div class="changeColor enableHover" id="sheW39" data="defaultWhite">39</div>
          <div class="changeColor enableHover" id="sheW40" data="defaultWhite">40</div>
          <div class="changeColor enableHover" id="sheW41" data="defaultWhite">41</div>
          <div class="changeColor enableHover" id="sheW42" data="defaultWhite">42</div>
          <div class="changeColor enableHover" id="sheW43" data="defaultWhite">43</div>
          <div class="changeColor enableHover" id="sheW44" data="defaultWhite">44</div>
          <div class="changeColor enableHover" id="sheW45" data="defaultWhite">45</div>
          <div class="changeColor enableHover" id="sheW46" data="defaultWhite">46</div>
          <div class="changeColor enableHover" id="sheW47" data="defaultWhite">47</div>
          <div class="changeColor enableHover" id="sheW48" data="defaultWhite">48</div>
          <div class="changeColor enableHover" id="sheW48" data="defaultWhite">48</div>
          <div class="changeColor enableHover" id="sheW48" data="defaultWhite">48</div>
          <div class="changeColor enableHover" id="sheW49" data="defaultWhite">49</div>
          <div class="changeColor enableHover" id="sheW50" data="defaultWhite">50</div>
          <div class="changeColor enableHover" id="sheW51" data="defaultWhite">51</div>
          <div class="changeColor enableHover" id="sheW52" data="defaultWhite">52</div>
          <div class="Letter">
            <div class="letterCenter">S</div>
          </div>
        </div>
      </div> 
    </div>
    </body>
</html>

关于javascript - 单击时多次(循环)更改 Div 背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60754675/

上一篇：javascript - 如何通过添加类在td内显示圆圈？

下一篇：jquery - 如何使用Jquery在右上角的下拉列表中制作相关的语言选项？

相关文章：

javascript - 如何使用JavaScript更改YouTube播放器播放头的颜色？

javascript - 两种状态的三向切换(Javascript 或 jQuery)

javascript - VueJS - 验证表单文件上传中的文件大小要求

javascript - 如何从 highchart.js 中的饼图中删除空格？

javascript - Jquery .click() 不适用于 Android

javascript - Select2 始终显示占位符

javascript - mouseleave后jQuery返回原始状态

html - 表格中 super 简单的 CSS 工具提示，为什么不显示，我可以让它工作吗？

javascript - 在 FF 中淡入 <li> 时，项目符号点不显示

javascript - 仅打印对数

©2024 IT工具网  联系我们