我正在制作一個需要用戶名和選定影像才能傳遞到下一頁的游戲。我使用的代碼為名稱執行此操作，我認為影像資訊也已傳遞，但影像沒有顯示在第二頁上，它只是顯示一個損壞的圖示。
這必須僅使用 JS/Jquery 來完成。
這是 HTML - 我為此使用了單選按鈕并將值設定為影像路徑。
<div class="introbox">
<div class="introtext"><h1>Pick an Avatar:</h1></div>
<div class="avatarselection">
<label>
<input type="radio" name="test" checked />
<img src="Elements/images/Avatar1.png" alt="Blue Planet Avatar" class="Avatar Planet" value="Elements/images/Avatar1.png"/></label>
<label>
<input type="radio" name="test" />
<img src="Elements/images/Avatar2.png" alt="Pink Spaceman Avatar" class="Avatar Spaceman" value="Elements/images/Avatar2.png"/></label>
<label><input type="radio" name="test" />
<img src="Elements/images/Avatar3.png" alt="Multicolour Spaceship Avatar" class="Avatar Spaceship" value="Elements/images/Avatar3.png" /></label>
<label><input type="radio" name="test" />
<img src="Elements/images/Avatar4.png" alt="Earth Planet Avatar" class="Avatar Earth" value="Elements/images/Avatar4.png" /></label>
</div>
這是我正在嘗試的 JS/JQuery。
$(".enter").on("click", setStorage)
function setStorage(){
//save name input
let usernameval = $(".name").val();
localStorage.setItem('usernameval', usernameval);
//save avatar input
let avatarval = $("input[type='radio']:checked").val();
localStorage.setItem('avatarval', avatarval);
//shows message name & avatar are saved
$(".submitted").text("Thanks " usernameval);
}
window.onload = function(){
let getName = localStorage.getItem('usernameval');
$(".username").html(getName);
let getAvatar = localStorage.getItem('avatarval');
$(".useravatar").html("<img src=" getAvatar "/>");
}
這就是正在發生的事情，名稱上方應該有用戶選擇的頭像。
uj5u.com熱心網友回復：
考慮以下。
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>
該value屬性僅分配給表單元素。您可以將其分配給您的影像元素，但這是不好的做法。將 移動value到input允許您呼叫.val()并取回正確的值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/533386.html
下一篇：execve如何運行命令？