stackoom
  简体   繁体   中英

Want to make a rating list which onclick check no. of stars and print no. of stars clicked and toggle onclick

 原文  2021-08-17 19:43:29  3   2    javascript/ html/ css

Question

Issues

  • Can we use some simple code plz
  • My code is cumbersome - Is there any way to make use of single java script and get it happen.
  • Also now my rating is not toggling means not change when again clicked or clicked a back star
  • Can we use this as there are more ratings like 5 or 6 - Is is possible to just use one JS for all and all are toggled differently .
  • Are we able to get counting and display it below

 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 answers

solution1
 0  2021-08-17 20:17:06

Try this something like this code

 <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";
            }
        })
    });
  });
})

solution2
 0  2021-08-17 20:21:19

Here is a quick version of how you could do something like that

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to make rating stars in html and JavaScript? Change the stars color onClick using reactjs How to deselect only the star which is clicked and not all the stars in rating component in Reactjs material ui 5(mui5)? Good key props for a list of rating stars how do I check if the stars have been clicked? (Jquery Star rating plugin) 5 stars rating script Validating jquery rating stars Random stars rating with javascript Rating system with stars Show rating stars in popup
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM