单击时多次更改 Div 背景颜色（循环）
Posted
技术标签:
【中文标题】单击时多次更改 Div 背景颜色（循环）【英文标题】：Change Div background color several times (loop) on click 【发布时间】：2020-03-19 09:56:21 【问题描述】：你好 Stacokoverflowers！
我有一个 div 包装器，里面有 52 个盒子和一个带有字母的大盒子。围绕大字母的最小的，我用 css 网格完成了这个，现在如果我将鼠标悬停在那些小字母上，它会变成浅灰色。
我正在努力实现的目标
点击时（52 个小方框中的任何一个），背景应该首先变成绿色，如果我再次点击同一个方框顶部，它应该变成红色。在为红色或绿色时，应禁用悬停状态（灰色）。如果您第三次单击，背景应该会变回白色。并且应该再次启用灰色悬停选项。
我在每个框上也有一个数据属性，它声明为“defaultWhite”，我想在单击该框时将其更改为红色或绿色或返回 defaultWhite。所以在 bg 数据上用背景颜色更新。 |
因为我打算稍后将此数据导出到 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
谁能帮我实现循环中的颜色变化和点击时的数据更新？ :)
【问题讨论】：
你可以选择 JQuery 吗？ @johannchopin 当然 :)！ 【参考方案1】：首先你应该知道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>【讨论】：
哦，这太棒了@Cray，我会尝试复制它，但使用数据字段:)！ 你可以简单地用item.setAttribute('data', 'defaultGreen');等将它添加到if/else部分
感谢@Cray ???顺便说一句，不知道为什么，但是在本地并在 Chrome 中进行测试，我无法使 changeColor 功能起作用。你知道为什么会这样吗？
您很可能需要将 javascript 代码包装在 jQuery 的 document.ready()（或类似的东西）中。否则它会在 DOM 之前加载，并且点击监听器不会被初始化。【参考方案2】：
There must not be multiple elements in a document that have the same id value.
在单个类名上使用“starts with”选择器应该可以解决问题。使用它可以选择所有类以“^she”开头的元素。
在将样式应用于单击的元素时，$(this) 选择器可用于定位调用单击的元素。
类似对象的地图可以用来存储被点击元素的当前状态。唯一键可以是“类”，因为每个元素都不同。
const changeColor = document.getElementById('changeColor'),
colors = ['green', 'red', 'white'];
let colorIndex = 0;
let map = ;
$('[class^="she"]').on('click', function()
let classN = $(this).attr('class');
map[classN] = map[classN] || 0;
colorIndex = (map[classN]) % colors.length;
$(this).css("backgroundColor", colors[colorIndex]);
++map[classN];
);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;
<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>
<div class="generalWrapper">
<div class="boxes-container">
<div class="grid-container">
<div class="Title">SHE</div>
<div class="sheW1" data="defaultWhite">1</div>
<div class="sheW2" data="defaultWhite">2</div>
<div class="sheW3" data="defaultWhite">3</div>
<div class="sheW4" data="defaultWhite">4</div>
<div class="sheW5" data="defaultWhite">5</div>
<div class="sheW6" data="defaultWhite">6</div>
<div class="sheW7" data="defaultWhite">7</div>
<div class="sheW8" data="defaultWhite">8</div>
<div class="sheW9" data="defaultWhite">9</div>
<div class="sheW10" data="defaultWhite">10</div>
<div class="sheW11" data="defaultWhite">11</div>
<div class="sheW12" data="defaultWhite">12</div>
<div class="sheW13" data="defaultWhite">13</div>
<div class="sheW14" data="defaultWhite">14</div>
<div class="sheW15" data="defaultWhite">15</div>
<div class="sheW16" data="defaultWhite">16</div>
<div class="sheW17" data="defaultWhite">17</div>
<div class="sheW18" data="defaultWhite">18</div>
<div class="sheW19" data="defaultWhite">19</div>
<div class="sheW20" data="defaultWhite">20</div>
<div class="sheW21" data="defaultWhite">21</div>
<div class="sheW22" data="defaultWhite">22</div>
<div class="sheW23" data="defaultWhite">23</div>
<div class="sheW24" data="defaultWhite">24</div>
<div class="sheW25" data="defaultWhite">25</div>
<div class="sheW26" data="defaultWhite">26</div>
<div class="sheW27" data="defaultWhite">27</div>
<div class="sheW28" data="defaultWhite">28</div>
<div class="sheW29" data="defaultWhite">29</div>
<div class="sheW30" data="defaultWhite">30</div>
<div class="sheW31" data="defaultWhite">31</div>
<div class="sheW32" data="defaultWhite">32</div>
<div class="sheW33" data="defaultWhite">33</div>
<div class="sheW34" data="defaultWhite">34</div>
<div class="sheW35" data="defaultWhite">35</div>
<div class="sheW36" data="defaultWhite">36</div>
<div class="sheW37" data="defaultWhite">37</div>
<div class="sheW38" data="defaultWhite">38</div>
<div class="sheW39" data="defaultWhite">39</div>
<div class="sheW40" data="defaultWhite">40</div>
<div class="sheW41" data="defaultWhite">41</div>
<div class="sheW42" data="defaultWhite">42</div>
<div class="sheW43" data="defaultWhite">43</div>
<div class="sheW44" data="defaultWhite">44</div>
<div class="sheW45" data="defaultWhite">45</div>
<div class="sheW46" data="defaultWhite">46</div>
<div class="sheW47" data="defaultWhite">47</div>
<div class="sheW48" data="defaultWhite">48</div>
<div class="sheW48" data="defaultWhite">48</div>
<div class="sheW48" data="defaultWhite">48</div>
<div class="sheW49" data="defaultWhite">49</div>
<div class="sheW50" data="defaultWhite">50</div>
<div class="sheW51" data="defaultWhite">51</div>
<div class="sheW52" data="defaultWhite">52</div>
<div class="Letter">
<div class="letterCenter">S</div>
</div>
</div>
</div>
</div>【讨论】：
我认为你需要修改你的答案 @NegiRox - 你能发现任何缺陷吗？ @Rayon 朋友谢谢！好的，我现在了解更多了 :) 我能找到的问题是，如果您单击一个框，它会开始变为下一个绿色的颜色，但是如果您单击另一个框，而不是从绿色开始，它会自动跳转到第二个“红色”，然后如果您单击另一个，又直接跳到白色？有什么办法解决这个问题？谢谢！！ 它适用于同一个按钮。但是对于连续按钮的工作方式不同 @NegiRox - 我没有关注整个问题。我已经进行了编辑，请告诉我它的外观。【参考方案3】：js有问题，而且documnet.getElementbyID也会alays返回一条记录，因此永远不要将click绑定到所有元素。 请尝试以下操作：
HTML：
var changeColor = $('.changeColor');
colors = ['green', 'red', 'white'];
let colorIndex = 0;
changeColor.click((event) =>
$(event.toElement).css('background-color',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="style.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 sheW1" data="defaultWhite">1</div>
<div class="changeColor sheW2" data="defaultWhite">2</div>
<div class="changeColor sheW3" data="defaultWhite">3</div>
<div class="changeColor sheW4" data="defaultWhite">4</div>
<div class="changeColor sheW5" data="defaultWhite">5</div>
<div class="changeColor sheW6" data="defaultWhite">6</div>
<div class="changeColor sheW7" data="defaultWhite">7</div>
<div class="changeColor sheW8" data="defaultWhite">8</div>
<div class="changeColor sheW9" data="defaultWhite">9</div>
<div class="changeColor sheW10" data="defaultWhite">10</div>
<div class="changeColor sheW11" data="defaultWhite">11</div>
<div class="changeColor sheW12" data="defaultWhite">12</div>
<div class="changeColor sheW13" data="defaultWhite">13</div>
<div class="changeColor sheW14" data="defaultWhite">14</div>
<div class="changeColor sheW15" data="defaultWhite">15</div>
<div class="changeColor sheW16" data="defaultWhite">16</div>
<div class="changeColor sheW17" data="defaultWhite">17</div>
<div class="changeColor sheW18" data="defaultWhite">18</div>
<div class="changeColor sheW19" data="defaultWhite">19</div>
<div class="changeColor sheW20" data="defaultWhite">20</div>
<div class="changeColor sheW21" data="defaultWhite">21</div>
<div class="changeColor sheW22" data="defaultWhite">22</div>
<div class="changeColor sheW23" data="defaultWhite">23</div>
<div class="changeColor sheW24" data="defaultWhite">24</div>
<div class="changeColor sheW25" data="defaultWhite">25</div>
<div class="changeColor sheW26" data="defaultWhite">26</div>
<div class="changeColor sheW27" data="defaultWhite">27</div>
<div class="changeColor sheW28" data="defaultWhite">28</div>
<div class="changeColor sheW29" data="defaultWhite">29</div>
<div class="changeColor sheW30" data="defaultWhite">30</div>
<div class="changeColor sheW31" data="defaultWhite">31</div>
<div class="changeColor sheW32" data="defaultWhite">32</div>
<div class="changeColor sheW33" data="defaultWhite">33</div>
<div class="changeColor sheW34" data="defaultWhite">34</div>
<div class="changeColor sheW35" data="defaultWhite">35</div>
<div class="changeColor sheW36" data="defaultWhite">36</div>
<div class="changeColor sheW37" data="defaultWhite">37</div>
<div class="changeColor sheW38" data="defaultWhite">38</div>
<div class="changeColor sheW39" data="defaultWhite">39</div>
<div class="changeColor sheW40" data="defaultWhite">40</div>
<div class="changeColor sheW41" data="defaultWhite">41</div>
<div class="changeColor sheW42" data="defaultWhite">42</div>
<div class="changeColor sheW43" data="defaultWhite">43</div>
<div class="changeColor sheW44" data="defaultWhite">44</div>
<div class="changeColor sheW45" data="defaultWhite">45</div>
<div class="changeColor sheW46" data="defaultWhite">46</div>
<div class="changeColor sheW47" data="defaultWhite">47</div>
<div class="changeColor sheW48" data="defaultWhite">48</div>
<div class="changeColor sheW48" data="defaultWhite">48</div>
<div class="changeColor sheW48" data="defaultWhite">48</div>
<div class="changeColor sheW49" data="defaultWhite">49</div>
<div class="changeColor sheW50" data="defaultWhite">50</div>
<div class="changeColor sheW51" data="defaultWhite">51</div>
<div class="changeColor sheW52" data="defaultWhite">52</div>
<div class="Letter">
<div class="letterCenter">S</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="a.js"></script>
</html>【讨论】：
以上是关于单击时多次更改 Div 背景颜色（循环）的主要内容，如果未能解决你的问题，请参考以下文章