使用點擊事件javascript創建簡單的星級

Question

我正在嘗試僅使用 javascript 創建簡單的星級評分系統。 但不知道該怎么做。 我只在 jquery 中做過。 有人可以幫忙嗎

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

應將活動類添加到我單擊的跨度中，如果單擊前一個跨度，則應將其從前跨度中刪除。

謝謝

這是我的 jquery 代碼，它正在運行。 如何將其轉換為 js 香草

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')
        }
    })

Answer 1

你可以使用這個香草代碼：

 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>

Answer 2

會有比這更好的解決方案，但您也可以這樣做。 見下文。

 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>

Answer 3

下面是一個簡單的 vanilla JS 解決方案：

 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>

---

編輯：修復了星級不降低的問題。