如何使用 JavaScript 在点击时突出显示元素？

Question

我正在为一个团队项目开发一个 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>

Answer 1

我会使用单选按钮

<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 来检测谁是谁：

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>