提问人：Amy 提问时间：11/5/2022 最后编辑：Amy 更新时间：11/8/2022 访问量：304
如何使用js或jquery将用户选择的头像保存在变量中
How do I save user selected avatar in a variable using js or jquery
问：
我的班级的任务是使用基本的 JQuery 制作一个简单的基于 Web 的儿童游戏。有人告诉我，JQuery 正变得越来越老派，但绝不是这样，这就是我们必须与 HTML/CSS 和 JS 一起使用来制作游戏的东西。
我已经在谷歌上搜索了一段时间，但找不到我想要的东西。
我的第一个屏幕是要求用户从四个显示的头像中选择一个，并输入他们的名字，这些名字将被存储并显示在整个游戏的顶角。
我认为选择头像的最佳方法可能是做一个单选按钮（按钮是隐藏的，但头像图像在单击时有一个边框）。我试图制作一个函数，将选定的图像存储到一个变量中，然后我可以随时随地在页面上显示该变量，但我的大脑对如何做到这一点一无所知。
我希望代码很可能非常简单明了，我可能想多了。感谢任何花时间帮助我的人 - 这也是我在这里的第一篇帖子，所以请原谅任何格式。
这是我用于选择头像的代码：
<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> //this div is for me to test if the avatar is stored in the variable
</div>
这是我到目前为止拥有的脚本，用于将名称存储在与头像选择不同的 div 中的可变中 - 我将其包括在内是因为我觉得头像存储可能是类似的东西......或者我完全做错了！
$(".enter").on("click", displayName);
//$(".setAvatar").on("click", displayAvatar);
let nameValue = $(".name").val();
function displayName(){
$(".submitted").text("Welcome " + nameValue + "!");
}
/* I thought this may have been what I was looking for, but clearly isn't
let selectedavatar = $("input[type='radio']:checked").val();
function displayAvatar() {
$(".showavatar").html("<img src=" + selectedavatar + "/>");
}
*/
回答！我的问题是我的第二个html文件夹上的文件路径，而且我需要做localstorage。谢谢！
答：
0赞
jyoung37
11/5/2022
#1
s单选按钮输入需要将图像路径作为值。
现在，你的$（“input[type='radio']：checked”）.val（）总是返回空，因为输入上没有value属性。
例：
<input type="radio" name="test" value="Elements/images/Avatar2.png" checked />
此外，在单选按钮集上应该只有 1 个 checked 属性，这表示要选择为默认单选按钮的单选按钮。
评论
0赞
Amy
11/5/2022
我想知道价值，谢谢。我确实添加了它们，但不幸的是，它仍然没有做我需要它做的事情。
0赞
ObieTrz
11/5/2022
#2
让我直截了当地说。如果要保存图像，只需获取源：
var selectedavatarImg = $("input[type='radio']:checked").attr("src");
然后在同一屏幕中使用它
function displayAvatar() {
$(".showavatar").html("<img src=" + selectedavatarImg + "/>");
}
或者，如果您想保存图像，然后在不同的屏幕中使用它，您可以将源保存在 localStorage 中：
var selectedavatarImg = $("input[type='radio']:checked").attr("src");
//save it in localStorage using a "key" to find it at the end
localStorage.setItem("avatar", selectedavatarImg);
获取不同屏幕中的图像源：
var avatar = localStorage.getItem("avatar");
function displayAvatar() {
$(".showavatar").html("<img src=" + avatar + "/>");
}
我说对了吗？
评论
0赞
Amy
11/5/2022
所以，是的，这正是我所要求的，似乎我离解决方案不远了，但是，选定的头像没有显示在 .showavatar div 中，它显示了一个损坏的文件图像，当我单击“在新选项卡中打开图像”时，显示“无法获取/未定义/”。我假设这意味着它没有将图像保存在变量中？
0赞
ObieTrz
11/7/2022
我将添加一个新的解决方案。一探究竟！
0赞
Amy
11/8/2022
这段代码确实有效。我的问题是我的第二个 html 文档上的 jquery 路径，它指向错误的文件夹，呵呵！谢谢！
-1赞
ObieTrz
11/7/2022
#3
我以其他答案为基础。试试这个：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>Trying to help </h2>
<div class="avatarselection">
<label>
<input type="radio" name="test" value="https://cdn.icon-icons.com/icons2/1378/PNG/512/avatardefault_92824.png"/>
<img
src="https://cdn.icon-icons.com/icons2/1378/PNG/512/avatardefault_92824.png"
value="https://cdn.icon-icons.com/icons2/1378/PNG/512/avatardefault_92824.png"
alt="Blue Planet Avatar"
class="Avatar Planet"
width="50"
height="50" /></label
><br />
<label>
<input type="radio" name="test" value="https://cdn2.iconfinder.com/data/icons/essenstial-ultimate-ui/64/avatar-512.png"/>
<img
src="https://cdn2.iconfinder.com/data/icons/essenstial-ultimate-ui/64/avatar-512.png"
alt="Pink Spaceman Avatar"
class="Avatar Spaceman"
width="50"
height="50" /></label
><br />
<label
><input type="radio" name="test" value="https://i.pinimg.com/564x/4b/71/f8/4b71f8137985eaa992d17a315997791e.jpg"/>
<img
src="https://i.pinimg.com/564x/4b/71/f8/4b71f8137985eaa992d17a315997791e.jpg"
alt="Multicolour Spaceship Avatar"
class="Avatar Spaceship"
width="50"
height="50" /></label
><br />
<label
><input type="radio" name="test" value="https://cdn.pixabay.com/photo/2020/07/14/13/07/icon-5404125_1280.png"/>
<img
src="https://cdn.pixabay.com/photo/2020/07/14/13/07/icon-5404125_1280.png"
alt="Earth Planet Avatar"
class="Avatar Earth"
width="50"
height="50" /></label
><br /><br />
<button class="setAvatar">Save Avatar</button>
<div class="showavatar"></div>
</div>
<script src="src/index.js"></script>
<script>
$(document).ready(function () {
$(".setAvatar").click(function () {
var selectedavatarImg = $("input[type='radio']:checked").val();
$(".showavatar").html(
"<img src='" + selectedavatarImg + "' width= '100' height='100'/>"
);
});
});
</script>
</body>
</html>让我知道它是否有效
评论