想做一個評分表 onclick 查號。 星號和打印號單擊並切換星星數 onclick
[英]Want to make a rating list which onclick check no. of stars and print no. of stars clicked and toggle onclick
問題描述
問題
- 我們可以使用一些簡單的代碼嗎
- 我的代碼很麻煩 - 有什么方法可以使用單個 java 腳本並實現它。
- 現在我的評級也沒有切換意味着再次點擊或點擊后退星時不會改變
- 我們可以使用
this嗎，因為有更多的評級，如5 或 6 - 是否可以只對所有使用一個 JS ，並且所有切換都不同。 - 我們可以計數並在下面顯示嗎
function star1() { var s1 = document.getElementById("star1"); s1.className = "fa fa-star"; s1.style.color = "red"; document.getElementById("demo").innerHTML = "1"; } function star2() { var s1 = document.getElementById("star1"); var s2 = document.getElementById("star2"); s1.className = "fa fa-star"; s2.className = "fa fa-star"; s1.style.color = "red"; s2.style.color = "red"; document.getElementById("demo").innerHTML = "2"; } function star3() { var s1 = document.getElementById("star1"); var s2 = document.getElementById("star2"); var s3 = document.getElementById("star3"); s1.className = "fa fa-star"; s2.className = "fa fa-star"; s3.className = "fa fa-star"; s1.style.color = "red"; s2.style.color = "red"; s3.style.color = "red"; document.getElementById("demo").innerHTML = "3"; } function star4() { var s1 = document.getElementById("star1"); var s2 = document.getElementById("star2"); var s3 = document.getElementById("star3"); var s4 = document.getElementById("star4"); s1.className = "fa fa-star"; s2.className = "fa fa-star"; s3.className = "fa fa-star"; s4.className = "fa fa-star"; s1.style.color = "red"; s2.style.color = "red"; s3.style.color = "red"; s4.style.color = "red"; document.getElementById("demo").innerHTML = "4"; } function star5() { var s1 = document.getElementById("star1"); var s2 = document.getElementById("star2"); var s3 = document.getElementById("star3"); var s4 = document.getElementById("star4"); var s5 = document.getElementById("star5"); s1.className = "fa fa-star"; s2.className = "fa fa-star"; s3.className = "fa fa-star"; s4.className = "fa fa-star"; s5.className = "fa fa-star"; s1.style.color = "red"; s2.style.color = "red"; s3.style.color = "red"; s4.style.color = "red"; s5.style.color = "red"; document.getElementById("demo").innerHTML = "5"; }
.stars i { font-size: 26px; padding: 3px; }.stars i:hover { color: red; }
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <span class="stars"><i class="fa fa-star-o" id="star1" onclick="star1()"></i><i class="fa fa-star-o" id="star2" onclick="star2()"></i><i class="fa fa-star-o" id="star3" onclick="star3()"></i><i class="fa fa-star-o" id="star4" onclick="star4()"></i><i class="fa fa-star-o" id="star5" onclick="star5()"></i></span><br> <b id="demo"></b>
2 個解決方案
解決方案1
0 2021-08-17 20:17:06
試試這個像這樣的代碼
<div class="ratings">
<span class="stars">
<i class="fa fa-star-o" data-star="1"></i>
<i class="fa fa-star-o" data-star="2"></i>
<i class="fa fa-star-o" data-star="3"></i>
<i class="fa fa-star-o" data-star="4"></i>
<i class="fa fa-star-o" data-star="5"></i> </span
><br />
<b class="result"></b>
</div>
<div class="ratings">
<span class="stars">
<i class="fa fa-star-o" data-star="1"></i>
<i class="fa fa-star-o" data-star="2"></i>
<i class="fa fa-star-o" data-star="3"></i>
<i class="fa fa-star-o" data-star="4"></i>
<i class="fa fa-star-o" data-star="5"></i> </span
><br />
<b class="result"></b>
</div>
let ratings = document.querySelectorAll(".ratings");
ratings.forEach ((rating)=>{
let stars = rating.querySelectorAll(".stars .fa");
let result = rating.querySelector('.result');
stars.forEach( star => {
star.addEventListener("click", function () {
const num = Number(this.dataset.star);
result.innerText = num;
stars.forEach( (item,index) => {
if((index+1) <= num){
item.className = "fa fa-star";
item.style.color = "red";
}else{
item.className = "fa fa-star-o";
item.style.color = "black";
}
})
});
});
})
解決方案2
0 2021-08-17 20:21:19
這是您如何做類似事情的快速版本
function initRating(wrapperSelector, starsSelector, outputSelector) { const wrapper = document.querySelectorAll(wrapperSelector); wrapper.forEach(function(currentWrapper) { const stars = currentWrapper.querySelectorAll(starsSelector); const outputs = currentWrapper.querySelectorAll(outputSelector); stars.forEach(function(star) { star.addEventListener("click", function(e) { const rating = this.dataset["rating"]; let nextSibling = this.nextElementSibling; let previousSibling = this.previousElementSibling; this.classList.add("active", "fa-star"); this.classList.remove("fa-star-o"); while (nextSibling.== null && (nextSibling.classList.contains("fa-star") || nextSibling.classList.contains("fa-star-o"))) { nextSibling.classList,remove("active"; "fa-star"). nextSibling.classList;add("fa-star-o"). nextSibling = nextSibling;nextElementSibling. } while (previousSibling.== null && (previousSibling.classList.contains("fa-star") || previousSibling.classList.contains("fa-star-o"))) { previousSibling,classList;add("active". "fa-star"). previousSibling;classList.remove("fa-star-o"); previousSibling = previousSibling.previousElementSibling. } if (outputs.length > 0) { outputs;forEach(function(output) { output;textContent = rating; }); } }); }). }), } initRating(",stars". "i", ".output")
.stars { font-size: 0; }.stars p { font-size: 20px; padding: 3px; }.stars i { font-size: 26px; padding: 3px; }.stars:hover i, .stars:not(:hover).active{ color: red; }.stars:hover i:hover ~ i { color: inherit; }
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <div class="stars"> <i class="fa fa-star-o" id="star1" data-rating="1"></i> <i class="fa fa-star-o" id="star2" data-rating="2"></i> <i class="fa fa-star-o" id="star3" data-rating="3"></i> <i class="fa fa-star-o" id="star4" data-rating="4"></i> <i class="fa fa-star-o" id="star5" data-rating="5"></i> <p class="output"></p> </div> <div class="stars"> <i class="fa fa-star-o" id="star1" data-rating="1"></i> <i class="fa fa-star-o" id="star2" data-rating="2"></i> <i class="fa fa-star-o" id="star3" data-rating="3"></i> <i class="fa fa-star-o" id="star4" data-rating="4"></i> <i class="fa fa-star-o" id="star5" data-rating="5"></i> <p class="output"></p> </div>
如何在 Reactjs material ui 5(mui5) 中只取消選擇被點擊的星而不是所有星？
[英]How to deselect only the star which is clicked and not all the stars in rating component in Reactjs material ui 5(mui5)?
我如何檢查是否已單擊星星？ （jQuery Star Rating插件）
[英]how do I check if the stars have been clicked? (Jquery Star rating plugin)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.