如何用JQuery将选中头像路径传递到下一页并正常显示

问题原因 #

1. 单选框<input type="radio">未设置value属性，你错误地将头像路径写在了<img>标签的value上，导致$("input[type='radio']:checked").val()获取到的是空值，存储到localStorage的路径无效。
2. 生成img标签时，src属性未添加引号，若路径包含特殊字符会引发解析错误，即使路径正确也可能显示异常。

修改后的代码 #

HTML代码

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

JS/JQuery代码

$(".enter").on("click", setStorage)

function setStorage(){
    // 保存用户名输入
    let usernameval = $(".name").val();
    localStorage.setItem('usernameval', usernameval);
    // 保存选中的头像路径（现在能正确获取单选框的value）
    let avatarval = $("input[type='radio']:checked").val();
    localStorage.setItem('avatarval', avatarval);
    // 显示提交提示
    $(".submitted").text("Thanks " + usernameval);
}

window.onload = function(){
    let getName = localStorage.getItem('usernameval');
    $(".username").html(getName);

    let getAvatar = localStorage.getItem('avatarval');
    // 使用模板字符串拼接，给src添加引号，确保路径解析正确
    $(".useravatar").html(`<img src="${getAvatar}" alt="User Avatar"/>`);
}

说明 #

• 单选框是表单选择控件，需要将对应的头像路径赋值给其value属性，这样才能通过:checked选择器获取到正确的路径值。
• 使用ES6模板字符串（反引号包裹）拼接img标签，自动处理src属性的引号问题，避免路径解析错误，同时添加alt属性提升页面可访问性。

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