星級評分系統，給出唯一的評分

Question

我正在使用Star系統爲數據庫中的某些影片評分，我在一段時間內添加了這些影片，並且每部影片都伴隨着星星。

我希望用戶給每部電影賦予獨特的評價，例如，如果用戶給一部電影提供了五顆星，那麼如果他試圖再給另一部電影提供五顆五顆星，那麼必須有一些指示顯示 將星星從黃色變爲紅色，然後提交評分。有人可以給我一些樣品。

.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已經給出評級，因此如果這個類與以前star-rating類prensent它將使用橙星

.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"); 
    }); 
}); 

編輯：

Jsfiddle demo（請刪除紅色與橙色星的URL）

Check this also（作出詢問的註釋改動）