Изменение цвета фона Div несколько раз (l oop) при нажатии - PullRequest
Новая
       1

Изменение цвета фона Div несколько раз (l oop) при нажатии

1 голос
/ 19 марта 2020

Здравствуйте, Stacokoverflowers!

У меня есть упаковщик div с 52 ящиками внутри и большой ящик с буквой. самые маленькие, окружающие большую букву, я сделал это с помощью css сетки, прямо сейчас, если я наведу курсор на эти маленькие, она станет светло-серой.

Чего я пытаюсь достичь

При щелчке (любом из 52 маленьких квадратиков) фон должен сначала стать зеленым, а если я снова нажму сверху того же поля, он станет красным. пока он красный или зеленый, состояние зависания (серое) должно быть отключено. Если вы щелкнете в третий раз, фон go снова станет белым. и опция серого наведения должна быть снова включена.

У меня также есть свойство данных в каждом поле, которое указано как «defaultWhite», которое я хотел бы изменить на красный или зеленый или обратно на defaultWhite при нажатии на это поле , Так что на БГ данные обновляются с цветом фона. |

Поскольку я планирую экспортировать эти данные в Excel, сделайте c позже. 

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

Любой может помочь мне добиться изменения цвета в l oop а данные обновляются при нажатии? :)

Ответы [ 3 ]

2 голосов
/ 19 марта 2020

Сначала вы должны знать, что 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>
1 голос
/ 19 марта 2020

Не должно быть кратных elements в document с одинаковым значением id.

Использование селектора «начинается с» в именах отдельных классов должно решить проблему. С помощью которого вы можете выбрать все элементы, имеющие класс, начинающийся с «^ 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>
0 голосов
/ 19 марта 2020

Есть проблема с js, а также document mnet .getElementbyID будет задерживать возврат одной записи, следовательно, никогда не привязывать щелчок ко всем элементам. Пожалуйста, попробуйте ниже:

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...