我的班級的任務是使用基本的 JQuery 制作一個簡單的基于網路的兒童游戲。有人告訴我，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 檔案夾上的檔案路徑加上我需要做本地存盤。謝謝！
uj5u.com熱心網友回復：
讓我說清楚。如果要保存影像，只需獲取源：
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 "/>");
}
我做對了嗎？
uj5u.com熱心網友回復：
s您的單選按鈕輸入需要將影像路徑作為值。
現在，您的 $("input[type='radio']:checked").val() 總是會回傳空，因為輸入上沒有 value 屬性。
例子：
<input type="radio" name="test" value="Elements/images/Avatar2.png" checked />
此外，您應該在單選按鈕集上只有 1 個選中的屬性，這表示您希望選擇默認的單選按鈕。
uj5u.com熱心網友回復：
我以其他答案為基礎。嘗試這個：
<!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>讓我知道它是否有效
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/530914.html
上一篇：如何在一行之間列印輸入值？