Заполнение звездного рейтинга

Question

Нужно заполнить звезды в соответствии со значением в rating_value.

       <link rel="stylesheet" href="css/rating.css">
            
            <div class="rating" >
                <div class="rating_body">
                <div class="rating_active"></div>
                    <div class="rating_items"></div>
                </div>  
                <div class="rating_value" >4</div>  
            </div>
        
       
    
     <script type="text/javascript">
            const ratings=document.querySelectorAll('.rating');
            if (ratings.length>0){
                initRatings();
            }
        
            function initRatings(){
                let ratingActive, ratingValue;
                for (let index=0; index<ratings.length; index++){
                    const rating=ratings[index];
                        initRating(rating);
                }
        
            function initRating(rating){
                initRatingVars(rating);
                setRatingActiveWidth();
            }
            
            function initRatingVars(rating){
                    ratingActive=rating.document.querySelectorAll('.rating_active');
                ratingValue=rating.document.querySelectorAll('.rating_value');
                        
            }
        
            function setRatingActiveWidth(index=ratingValue.innerHTML){
            const ratingActiveWidth=index/0.05;
            ratingActive.style.width=`${ratingActiveWidth}%`;
                        
            }
        }
        </script>

.rating{
  font-size: 25px;
  display: inline-flex;
  align-items: flex-end;
}

.rating_body{
 position: relative;
}

.rating_body::before{
  content: '★★★★★';
  display: block;
}
.rating_items{
display: flex;
position: absolute;
width: 100%;
height: 100%;
top: 0;
}

.rating_active{
  position: absolute;
  height: 100%;
  width: 0%;
  overflow: hidden; 
  top: 0;

}
.rating_active::before{
    content: '★★★★★';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    color: red;
}

.rating_value{
   font-size: 100%;
}

Answer 1

Думаю вы так хотели.

const ratings=document.querySelectorAll('.rating');

if (ratings.length>0){
    initRatings();
}

function initRatings(){
    let ratingActive, ratingValue;
    for (let index=0; index<ratings.length; index++){
        const rating=ratings[index];
            initRating(rating);
    }

    function initRating(rating){
        initRatingVars(rating);
        setRatingActiveWidth();
    }

    function initRatingVars(rating){
        ratingActive=rating.querySelectorAll('.rating_active')[0];
        ratingValue=rating.querySelectorAll('.rating_value')[0];
    }


    function setRatingActiveWidth(index=ratingValue.innerHTML){        
        const ratingActiveWidth = index/0.05;
        ratingActive.style.width=`${ratingActiveWidth}%`;
    }
}

.rating{
  font-size: 25px;
  display: inline-flex;
  align-items: flex-end;
}

.rating_body{
 position: relative;
}

.rating_body::before{
  content: '★★★★★';
  display: block;
}
.rating_items{
display: flex;
position: absolute;
width: 100%;
height: 100%;
top: 0;
}

.rating_active{
  position: absolute;
  height: 100%;
  width: 0%;
  overflow: hidden; 
  top: 0;

}
.rating_active::before{
    content: '★★★★★';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    color: red;
}

.rating_value{
   font-size: 100%;
}

<div class="rating" >
    <div class="rating_body">
    <div class="rating_active"></div>
        <div class="rating_items"></div>
    </div>  
    <div class="rating_value" >4</div>  
</div>
<br>
<div class="rating" >
    <div class="rating_body">
    <div class="rating_active"></div>
        <div class="rating_items"></div>
    </div>  
    <div class="rating_value" >1</div>  
</div>
<br>
<div class="rating" >
    <div class="rating_body">
    <div class="rating_active"></div>
        <div class="rating_items"></div>
    </div>  
    <div class="rating_value" >5</div>  
</div>

а чуть по красивее

const ratings = document.querySelectorAll('.rating');

ratings.forEach( rating =>{
  const ratingActive = rating.querySelectorAll('.rating_active')[0];
  const ratingValue = rating.querySelectorAll('.rating_value')[0];
  const ratingActiveWidth = ratingValue.innerHTML/0.05;
  ratingActive.setAttribute('style', `width:${ratingActiveWidth}%`);
});

.rating{
  font-size: 25px;
  display: inline-flex;
  align-items: flex-end;
}

.rating_body{
 position: relative;
}

.rating_body::before{
  content: '★★★★★';
  display: block;
}
.rating_items{
display: flex;
position: absolute;
width: 100%;
height: 100%;
top: 0;
}

.rating_active{
  position: absolute;
  height: 100%;
  width: 0%;
  overflow: hidden; 
  top: 0;

}
.rating_active::before{
    content: '★★★★★';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    color: red;
}

.rating_value{
   font-size: 100%;
}

<div class="rating" >
    <div class="rating_body">
    <div class="rating_active"></div>
        <div class="rating_items"></div>
    </div>  
    <div class="rating_value" >4</div>  
</div>
<br>
<div class="rating" >
    <div class="rating_body">
    <div class="rating_active"></div>
        <div class="rating_items"></div>
    </div>  
    <div class="rating_value" >1</div>  
</div>
<br>
<div class="rating" >
    <div class="rating_body">
    <div class="rating_active"></div>
        <div class="rating_items"></div>
    </div>  
    <div class="rating_value" >5</div>  
</div>

БЛОГ НА HUSL

Заполнение звездного рейтинга

Ответы (1 шт):