creating simple star rating using click event javascript - Stack Overflow

admin管理员组

文章数量:1410724

I am trying to create s simple star rating system using javascript only. But no idea how to do that. I have done it in jquery only. Can someone please help

<div id='rating'>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
</div>

active clas should be added upto the spans on which I click, & if clicked previous span it should be removed from front spans.

Thanks

This is my jquery code , it is working. How to convert it into js vanilla

var spansCounts =  $('#rating span').length
    $('#rating span').on('click', function(e) {
        console.log($(this).index())
        $('#rating span').removeClass('active');

        for(var i=0 ; i < $(this).index() + 1; i++){
            $('#rating span').eq(i).addClass('active')
        }
    })

I am trying to create s simple star rating system using javascript only. But no idea how to do that. I have done it in jquery only. Can someone please help

<div id='rating'>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
</div>

active clas should be added upto the spans on which I click, & if clicked previous span it should be removed from front spans.

Thanks

This is my jquery code , it is working. How to convert it into js vanilla

var spansCounts =  $('#rating span').length
    $('#rating span').on('click', function(e) {
        console.log($(this).index())
        $('#rating span').removeClass('active');

        for(var i=0 ; i < $(this).index() + 1; i++){
            $('#rating span').eq(i).addClass('active')
        }
    })

• javascript

Share Improve this question Follow edited Mar 11, 2018 at 9:33 raju asked Mar 11, 2018 at 9:24 rajuraju 6,9542727 gold badges8989 silver badges183183 bronze badges 3

• 2 Do you have any javascript code written yet?? – Jason Spradlin Commented Mar 11, 2018 at 9:26
• Do you have a working jquery implementation and want to convert it to work with vanilla apis (without jquery)? – Majid Fouladpour Commented Mar 11, 2018 at 9:28
• Your jQuery isn't even that good. $('#rating').on('click','>span',function() {var clicked = $(this); clicked.nextAll().removeClass('active'); clicked.prevAll().addBack().addClass('active'); console.log(clicked.index());}); – Niet the Dark Absol Commented Mar 11, 2018 at 10:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You could use this vanilla code:

document.querySelector('#rating').addEventListener('click', function (e) {
    let action = 'add';
    for (const span of this.children) {
        span.classList[action]('active');
        if (span === e.target) action = 'remove';
    }
});

#rating { font-size: 0; }
#rating span { font-size: 40px; }
#rating span::before { content: "☆"; }
#rating span.active::before {content: "★"; }
#rating span:hover { cursor: pointer; }

<div id='rating'>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

There will be a better solution than this, but you can do this too. See Below.

var x=document.getElementsByTagName("span");
for(var i=0;i<x.length;i++){
  x[i].addEventListener("click",function(){
    var value=this.getAttribute("value");
    clearClass();
    for(var j=value-1;j>=0;j--){
      x[j].classList.toggle('a');
    }
  })
};

function clearClass(){
  var x=document.getElementsByTagName("span");
  for(var i=0;i<x.length;i++){
      //console.log(x[i].classList);
      x[i].classList.remove('a');
  };
}

.a{
color:yellow;
}

<div id='rating'>
  <span value='1'>*</span>
  <span value='2'>*</span>
  <span value='3'>*</span>
  <span value='4'>*</span>
  <span value='5'>*</span>
</div>

A simple vanilla JS solution is below:

document.querySelector('#rating').addEventListener('click', function (e) {
    if (e.target.nodeName === 'SPAN') {
        var currentSibling = e.target;
        var nextSibling = e.target;
        currentSibling.classList.add('active');
        while ((currentSibling = currentSibling.previousElementSibling)) {
            currentSibling.classList.add('active');
        }
        while ((nextSibling = nextSibling.nextElementSibling)) {
            nextSibling.classList.remove('active');
        }
    }
});

#rating span.active {
  color: orange;
}

#rating span {
  font-size: 42px;
  cursor: pointer;
}

<div id='rating'>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
</div>

---

Edit: Fixed an issue with star rating not reducing.

本文标签： creating simple star rating using click event javascriptStack Overflow