Категория stars, Дайте уникальный рейтинг

Question

Я использую систему Star для оценки некоторых фильмов из базы данных, добавляю эти фильмы в цикл while и звезды вместе с каждым фильмом.

Я хочу, чтобы пользователь дал уникальный рейтинг каждому фильму, например, если пользователь дал пять звезд одному фильму, и если он попытается снова передать пять пяти звезд другому фильму, должно быть какое-то указание на показать , поверните звезды от желтого до красного, прежде чем отправлять рейтинг. Может кто-нибудь дать мне несколько образцов.

.star-rating { 
 
    font-size: 0; 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    /* width: 250px; remove this */ 
 
    height: 50px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
 
    background-size: contain; 
 
} 
 
.star-rating i { 
 
    opacity: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    /* width: 20%; remove this */ 
 
    z-index: 1; 
 
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
 
    background-size: contain; 
 
} 
 
.star-rating input { 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    opacity: 0; 
 
    display: inline-block; 
 
    /* width: 20%; remove this */ 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 
.star-rating input:hover + i, 
 
.star-rating input:checked + i { 
 
    opacity: 1; 
 
} 
 
.star-rating i ~ i { 
 
    width: 40%; 
 
} 
 
.star-rating i ~ i ~ i { 
 
    width: 60%; 
 
} 
 
.star-rating i ~ i ~ i ~ i { 
 
    width: 80%; 
 
} 
 
.star-rating i ~ i ~ i ~ i ~ i { 
 
    width: 100%; 
 
} 
 
::after, 
 
::before { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.star-rating.star-5 { 
 
    width: 250px; 
 
} 
 
.star-rating.star-5 input, 
 
.star-rating.star-5 i { 
 
    width: 20%; 
 
} 
 
.star-rating.star-5 i ~ i { 
 
    width: 40%; 
 
} 
 
.star-rating.star-5 i ~ i ~ i { 
 
    width: 60%; 
 
} 
 
.star-rating.star-5 i ~ i ~ i ~ i { 
 
    width: 80%; 
 
} 
 
.star-rating.star-5 i ~ i ~ i ~ i ~i { 
 
    width: 100%; 
 
} 
 
.star-rating.star-3 { 
 
    width: 150px; 
 
} 
 
.star-rating.star-3 input, 
 
.star-rating.star-3 i { 
 
    width: 33.33%; 
 
} 
 
.star-rating.star-3 i ~ i { 
 
    width: 66.66%; 
 
} 
 
.star-rating.star-3 i ~ i ~ i { 
 
    width: 100%; 
 
}

<form method="get" action="" id="form1"> 
 
    <span class="star-rating star-5"> 
 
      <input type="radio" name="rating" value="1"><i></i> 
 
      <input type="radio" name="rating" value="2"><i></i> 
 
      <input type="radio" name="rating" value="3"><i></i> 
 
      <input type="radio" name="rating" value="4"><i></i> 
 
      <input type="radio" name="rating" value="5"><i></i> 
 
     </span> 
 
</form>

Далее я сохранит рейтинг с помощью PHP, когда эта проблема разрешается. Ниже приведен код, который я использую.

Спасибо за любую помощь :-) ``

Answer 1

добавить класс already-given к уже дал рейтинги, так что, если этот класс prensent с предыдущим star-rating класса он будет использовать оранжевую звезду

.star-rating.already input:hover+ i 
{ 
    background: url('/*Url of orange star*/');!important 
} 

<form method="get" action="" id="form1"> 
    <span class="star-rating star-5 already-given"> 
      <input type="radio" name="rating" value="1"><i></i> 
      <input type="radio" name="rating" value="2"><i></i> 
      <input type="radio" name="rating" value="3"><i></i> 
      <input type="radio" name="rating" value="4" checked><i></i> 
      <input type="radio" name="rating" value="5"><i></i> 
     </span> 
</form> 

Jquery код

$(document).ready(function(){ 
    $("input[type=radio]").on("change",function(){ 
    $(this).parents(".star-rating").removeClass("already-given").addClass("already-given"); 
    }); 
}); 

EDIT:

Jsfiddle demo (удалите красный цвет с URL оранжевой звезды)

Check this also (изменения, сделанные как просили в комментариях)