1 回答

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊
雖然<input>元素可以在表單中發(fā)送數(shù)據(jù),但<span>元素不能?,F(xiàn)在您正在使用 JavaScript 中的一個(gè)函數(shù)來(lái)模擬這種行為,方法是嘗試從懸?;騿螕舻姆秶蝎@取值。sessionStorage.starRating = count應(yīng)該是將sessionStorage.setItem('starRating', count)值存儲(chǔ)到會(huì)話(huà)存儲(chǔ)中。但這不是罪魁禍?zhǔn)住?/p>
不使用<span>元素,而是使用<input type="radio">元素來(lái)表示用戶(hù)給出的評(píng)分。雖然樣式看起來(lái)很難,但通過(guò)使用<label>元素作為樣式點(diǎn)可以相當(dāng)容易。當(dāng)您將<label>帶有屬性的 連接到它所屬for的元素的 id 時(shí),它就變成可點(diǎn)擊的了。<input>這意味著每當(dāng)我單擊標(biāo)簽時(shí),輸入也會(huì)被單擊并因此被選中。
因此,您隱藏輸入并設(shè)置標(biāo)簽樣式。在 CSS 中,您可以根據(jù)當(dāng)前選擇的輸入說(shuō)明點(diǎn)擊標(biāo)簽的外觀。:checked偽選擇器在這里是真正的救星。
將所有這些放在您的表單中,可以將當(dāng)前選定的單選按鈕發(fā)送到服務(wù)器,name并且value無(wú)需執(zhí)行任何 JavaScript。
查看下面的代碼片段以查看它是否有效。JavaScript 部分可以忽略,因?yàn)樗皇且粋€(gè)演示。
/**
* For demonstration purposes.
* Logs the currently submitted 'rating' value.
*/
const form = document.querySelector('form');
form.addEventListener('submit', event => {
const formData = new FormData(event.target);
const rating = formData.get('rating');
console.log(rating);
event.preventDefault();
});
.star-input {
display: none;
}
.star {
color: gold;
}
.star-input:checked + .star ~ .star {
color: white;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<form>
<input type="radio" class="star-input" name="rating" id="star-1" value="1">
<label for="star-1" class="star"><i class="fas fa-star"></i></label>
<input type="radio" class="star-input" name="rating" id="star-2" value="2">
<label for="star-2" class="star"><i class="fas fa-star"></i></label>
<input type="radio" class="star-input" name="rating" id="star-3" value="3">
<label for="star-3" class="star"><i class="fas fa-star"></i></label>
<input type="radio" class="star-input" name="rating" id="star-4" value="4">
<label for="star-4" class="star"><i class="fas fa-star"></i></label>
<input type="radio" class="star-input" name="rating" id="star-5" value="5" checked>
<label for="star-5" class="star"><i class="fas fa-star"></i></label>
<button type="submit">Send</button>
</form>
- 1 回答
- 0 關(guān)注
- 136 瀏覽
添加回答
舉報(bào)