Нужна помощь.
Есть код, суть его игра пятнашки.
<style> * { -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Roboto', sans-serif; -webkit-tap-highlight-color: transparent; } html, body { width: 100%; height: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: rgb(61, 58, 58); font-size: 16px; } h1, p { margin: 0; color: #fff; text-align: center; } h1 { font-size: calc(3rem + 3vmin); padding: 0 3vmin; } p { font-size: calc(2rem + 2vmin); } .field { width: 80vmin; height: 80vmin; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgb(226, 226, 226); padding: 1vmin; } .field div { width: 23%; height: 23%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: calc(2rem + 2vmin); border-radius: 1vmin; font-weight: bold; } .win { color: red; font-weight: bolder; text-align: center; font-size: calc(3.5rem + 3.5vmin); } /*Элементы игрового поля*/ .active { background-color: #fff; -webkit-box-shadow: inset -0.26vw -0.26vw .26vw 0 rgba( 150, 150, 150, .5), inset .26vw .26vw .26vw 0 rgba( 255, 255, 255, .5); box-shadow: inset -0.26vw -0.26vw .26vw 0 rgba( 150, 150, 150, .5), inset .26vw .26vw .26vw 0 rgba( 255, 255, 255, .5); } .active:hover { cursor: pointer; opacity: .9; } /*Выбранный элемент игрового поля*/ .change { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media screen and (max-width: 767px) and (orientation: landscape) { html, body { font-size: 12px; } h1 { font-size: calc(2rem + 2vmin); padding: 0 3vmin; } p { font-size: calc(1rem + 1vmin); } } @media (max-width: 480px) { html, body { font-size: 12px; } } </style></head> <body> <h1>Игра Пятнашки</h1> <div class="field"> <div id="elem1" class="active">15</div> <div id="elem2" class="active">14</div> <div id="elem3" class="active">13</div> <div id="elem4" class="active">12</div> <div id="elem5" class="active">11</div> <div id="elem6" class="active">10</div> <div id="elem7" class="active">9</div> <div id="elem8" class="active">8</div> <div id="elem9" class="active">7</div> <div id="elem10" class="active">6</div> <div id="elem11" class="active">5</div> <div id="elem12" class="active">4</div> <div id="elem13" class="active">3</div> <div id="elem14" class="active">2</div> <div id="elem15" class="active">1</div> <div id="elem16" class=""></div> </div> <p>Ход: <span id="tour">0</span></p> <script src="script.js"> </script> </body> </html> const field = document.querySelector('.field'); const active = document.querySelectorAll('.active'); const change = document.getElementsByClassName('.change'); const divs = document.querySelectorAll('div'); field.addEventListener('click', (event) => { console.dir(event.target); if(!event.target.classList.contains('change') && event.target.classList.contains('active')){ divs.forEach(item => { item.classList.remove('change'); event.target.classList.add('change'); }) } if(event.target.classList.contains('active')) divs.forEach(item => { if(item.classList.contains('active','change')) item.classList.remove('active','change'); }) event.target.classList.add('active'); }) мне нужно что бы при клике на элемент с элемента на котором был предыдущий клик удалялся класс classList.remove('active','change'); и удалялся innerHTML и всё это переносилось на элемент на котором сработало событие. P/S на чистом js без фреймворков. |
Ramosok,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Спасибо, учту на будущее.
|
Цитата:
|
пятнашки макет
Ramosok,
проверка только на пусто, нужно ещё на соседа ... <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> * { -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Roboto', sans-serif; -webkit-tap-highlight-color: transparent; } html, body { width: 100%; height: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: rgb(61, 58, 58); font-size: 16px; } h1, p { margin: 0; color: #fff; text-align: center; } h1 { font-size: calc(3rem + 3vmin); padding: 0 3vmin; } p { font-size: calc(2rem + 2vmin); } .field { width: 80vmin; height: 80vmin; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgb(226, 226, 226); padding: 1vmin; } .field div { width: 23%; height: 23%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: calc(2rem + 2vmin); border-radius: 1vmin; font-weight: bold; } .win { color: red; font-weight: bolder; text-align: center; font-size: calc(3.5rem + 3.5vmin); } /*Элементы игрового поля*/ .active { background-color: #fff; -webkit-box-shadow: inset -0.26vw -0.26vw .26vw 0 rgba(150, 150, 150, .5), inset .26vw .26vw .26vw 0 rgba(255, 255, 255, .5); box-shadow: inset -0.26vw -0.26vw .26vw 0 rgba(150, 150, 150, .5), inset .26vw .26vw .26vw 0 rgba(255, 255, 255, .5); } .active:hover { cursor: pointer; opacity: .9; } /*Выбранный элемент игрового поля*/ .change { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media screen and (max-width: 767px) and (orientation: landscape) { html, body { font-size: 12px; } h1 { font-size: calc(2rem + 2vmin); padding: 0 3vmin; } p { font-size: calc(1rem + 1vmin); } } @media (max-width: 480px) { html, body { font-size: 12px; } } </style> </head> <body> <h1>Игра Пятнашки</h1> <div class="field"> <div id="elem1" class="active">15</div> <div id="elem2" class="active">14</div> <div id="elem3" class="active">13</div> <div id="elem4" class="active">12</div> <div id="elem5" class="active">11</div> <div id="elem6" class="active">10</div> <div id="elem7" class="active">9</div> <div id="elem8" class="active">8</div> <div id="elem9" class="active">7</div> <div id="elem10" class="active">6</div> <div id="elem11" class="active">5</div> <div id="elem12" class="active">4</div> <div id="elem13" class="active">3</div> <div id="elem14" class="active">2</div> <div id="elem15" class="active">1</div> <div id="elem16" class=""></div> </div> <p>Ход: <span id="tour">0</span></p> <script> const field = document.querySelector('.field'); const active = document.querySelectorAll('.active'); const change = document.getElementsByClassName('change'); const divs = document.querySelectorAll('div'); field.addEventListener('click', ({ target }) => { if(target == field) return; let itemChange = change[0]; if (itemChange) { let twoActive = [target, itemChange].every(elem => elem.classList.contains('active')); if (twoActive) { itemChange.classList.remove('change'); return; }; if (itemChange != target) { [target.innerHTML, itemChange.innerHTML] = [itemChange.innerHTML, target.innerHTML]; itemChange.classList.remove('change'); tour.innerHTML++; if (target.classList.contains('active')) { target.classList.remove('active') itemChange.classList.add('active') } else { target.classList.add('active') itemChange.classList.remove('active') } } } else target.classList.toggle('change') }) </script> </body> </html> |
Спасибо большое.
|
Часовой пояс GMT +3, время: 00:19. |