Как выделить элемент при нажатии JavaScript? - PullRequest
Новая
       14

Как выделить элемент при нажатии JavaScript?

0 голосов
/ 04 апреля 2020

Я работаю над игрой для 2 игроков для группового проекта, где вам нужно выбрать аватар, чтобы начать игру. Выбранный аватар отображается в реальной игре.

Поэтому я ищу решение для следующих ситуаций: 1. Выбранное изображение выделяется рамкой, когда вы нажимаете на нее. 2. Каждый игрок может выбрать только один аватар (то есть изображение) - поэтому граница изображения будет удалена, если вы нажмете на другой.

Это мой html код: 

<div class="col span-1-of-2">
    <h3>Player 1:</h3>
    <input type="text" name="name" id="name" placeholder="" required>
    <div class="avatar">
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
    </div>
    <div class="avatar">
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
    </div>
</div>
<div class="col span-1-of-2">
    <h3>Player 2:</h3>
    <input type="text" name="name" id="name" placeholder="" required>
    <div class="avatar">
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
    </div>
    <div class="avatar">
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
        <div class="col span-1-of-3"><input type="image" id="avatarID" src="super-mario-head.png" onclick="mark('avatarID')"></div>
    </div>
</div>

1 Ответ

0 голосов
/ 04 апреля 2020

Я бы использовал переключатели 

<label><input type="radio" name="pl-1-avatar" value="a"> <span>A</span></label>
<label><input type="radio" name="pl-1-avatar" value="b"> <span>B</span></label>

<label><input type="radio" name="pl-2-avatar" value="a"> <span>A</span></label>
<label><input type="radio" name="pl-2-avatar" value="b"> <span>B</span></label>

, чем JavaScript, чтобы определить, кто есть кто go для: 

const pl1avatar = document.querySelector('[name="pl-1-avatar"]:checked').value;
const pl2avatar = document.querySelector('[name="pl-2-avatar"]:checked').value;

и CSS: 

[name$="-avatar"]:checked ~ span {  /* SELECTED STYLE HERE */  }

Время демонстрации: 

const getAvatars = () => {
  const pl1avatar = document.querySelector('[name="pl-1-avatar"]:checked').value;
  const pl2avatar = document.querySelector('[name="pl-2-avatar"]:checked').value;
  console.log(`
    PLAYER 1 AVATAR: ${pl1avatar}
    PLAYER 2 AVATAR: ${pl2avatar}
  `);
}

document.querySelector("#play").addEventListener('click', getAvatars);
[name$="-avatar"] {
  position: absolute;
  opacity: 0;
}

[name$="-avatar"] ~ span {
  display: inline-block;
  padding: 10px;
  background: #eee;
}

[name$="-avatar"]:checked ~ span {
  box-shadow: 0 0 0 2px blue;
}
PLAYER 1<br>
<label><input type="radio" name="pl-1-avatar" value="a" checked> <span>A</span></label>
<label><input type="radio" name="pl-1-avatar" value="b"> <span>B</span></label>
<label><input type="radio" name="pl-1-avatar" value="c"> <span>C</span></label>

<hr>
PLAYER 2<br>
<label><input type="radio" name="pl-2-avatar" value="a" checked> <span>A</span></label>
<label><input type="radio" name="pl-2-avatar" value="b"> <span>B</span></label>
<label><input type="radio" name="pl-2-avatar" value="c"> <span>C</span></label>
<hr>

<button id="play">START GAME</button>
...