如何用JS/JQuery将用户选中的头像存储到变量中？

• 班级任务：使用基础JQuery结合HTML/CSS和JS制作简单Web儿童游戏，需实现首屏核心功能：从4个头像中选择其一、输入名字，这些信息需存储并在游戏全程显示在页面右上角
• 头像选择实现思路：用隐藏的单选按钮，点击头像时显示边框，需要编写函数将选中头像存储到变量，方便在页面任意位置展示

HTML（头像选择模块） #

<div class="avatarselection">
  <label>
    <input type="radio" name="test" checked />
    <img src="Elements/images/Avatar1.png" alt="Blue Planet Avatar" class="Avatar Planet" />
  </label>
  <label>
    <input type="radio" name="test" checked />
    <img src="Elements/images/Avatar2.png" alt="Pink Spaceman Avatar" class="Avatar Spaceman" />
  </label>
  <label>
    <input type="radio" name="test" checked />
    <img src="Elements/images/Avatar3.png" alt="Multicolour Spaceship Avatar" class="Avatar Spaceship" />
  </label>
  <label>
    <input type="radio" name="test" checked />
    <img src="Elements/images/Avatar4.png" alt="Earth Planet Avatar" class="Avatar Earth" />
  </label>

  <button class="setAvatar">Save Avatar</button>
  <div class="showavatar"></div> <!-- 用于测试头像是否存储到变量 -->
</div>

JavaScript（名字存储模块） #

$(".enter").on("click", displayName);
//$(".setAvatar").on("click", displayAvatar);

let nameValue = $(".name").val();

function displayName(){
  $(".submitted").text("Welcome " + nameValue + "!");
}

/* 曾尝试的头像存储逻辑，但未生效
let selectedavatar = $("input[type='radio']:checked").val();

function displayAvatar() {
  $(".showavatar").html("<img src=" + selectedavatar + "/>");
} 
*/

• 问题原因：第二个HTML文件的资源路径错误，且未使用localStorage进行持久化存储，导致信息无法跨页面或刷新后保留
• 解决方法：修正文件路径，通过localStorage保存选中头像的src属性值和用户名，确保信息在游戏全程可访问

内容的提问来源于stack exchange，提问作者Amy