Düğmeye tıklandığında yıldız simgesinin tamamı nasıl renklendirilir

Question

CodeIgniter'de bir proje yapıyorum ve bir ürünü derecelendirmek için kullanılan bir form var. i bir düğme (yıldız) i yellow.I bunu içine

rengini değiştirmek için tüm düğme (yıldız) yapmak gerekir ancak yalnızca

yellow.Middle sınırından renk değiştirir tıklandığında

Düğmenin

'u beyaz kalır. Herkes bana bunu nasıl yapacağımı açıklayabilir mi?

<h1><div class="rating" style="width:200px;float:left;padding-left:1px"> 
            <span id="span1" onclick="document.getElementById 

('rateText').innerHTML='Excellent', setColor(this.id);"> ? </span> 
            <span id="span2" onclick="document.getElementById 

('rateText').innerHTML='Good', setColor(this.id);"> ? </span> 
            <span id="span3" onclick="document.getElementById 

('rateText').innerHTML='Okay', setColor(this.id);"> ? </span> 
            <span id="span4" onclick="document.getElementById 

('rateText').innerHTML='Unsatisfied', setColor(this.id);"> ? </span> 
            <span id="span5" onclick="document.getElementById 

('rateText').innerHTML='Terrible', setColor(this.id);"> ? </span> 
            </div></h1> 

<div style="float:right;padding-right:450px"> 
     <h3><p id="rateText"></p></h3> 
</div> 

JavaScript Bu kod düğme

<script type="text/javascript"> 
function setColor(btn){ 
    var property = document.getElementById(btn); 
    property.style.color = "#FFFF00" 
} 
</script> 

CSS Bu kod bağlantı fare düğmeler ve renk değiştiren Sen uygulamak gerekir

<style type="text/css"> 
    #rateText{ 

    text-align:right; 

    } 
    .rating { 
    unicode-bidi: bidi-override; 
    direction: rtl ; 
    } 

    .rating > span:hover:before, 
    .rating > span:hover ~ span:before { 
    content: "\2605"; 
    position: absolute; 
    color: #FFFF00; 
    } 

</style> 

Answer 1

hover tıklandığında düğmesi renk değiştirir için aynı stil: vurgulu seçici. Örneğin, tıklanan yıldıza .active sınıfını ekleyebilirsiniz. Aşağıdaki css ve js kodunu kontrol edin.

.rating > span.active:before, 
.rating > span:hover:before, 
.rating > span:hover ~ span:before 
{ 
    content: "\2605"; 
    position: absolute; 
    color: #FFFF00; 
} 

function setColor(btn){ 
     var property = document.getElementById(btn); 
     property.classList.add('active'); 
}