5 звезд Форма обратной связи

Question

Решение найдено Here

реальный Закончено Предварительный просмотр Here

Если кто-то нуждается в помощи, делая то же самое или подобное, пожалуйста, не стесняйтесь задавать идентификатор будет рад помочь

Я создал 5 которая отправляет данные в базу данных в SQL. Все работает хорошо и как я хочу, кроме как в форме. Я в настоящее время имею 5 соотношение кнопок, предоставившие выбранный рейтинг номер, но вместо этого я хотел бы им быть образом моих персонализированных звезд

И

Когда пользователь выбирает 1 звезду, он превращается в мои 2-ой изображения звезды, когда они выбирают больше он изменяет другие звезды до числа звезд они выбрали

Вот это Live Preview и мой текущий код для кнопок соотношения

<div class="rating"> 
<label class="rating">1 
    <input name="rating" type="radio" class="ratingbtn" value="1" <?php if (isset($rating) && $rating=="1") echo "checked";?>> 
    2 </label> 
    <input type="radio" name="rating" <?php if (isset($rating) && $rating=="2") echo "checked";?> value="2"> 
    3 
    <input type="radio" name="rating" <?php if (isset($rating) && $rating=="3") echo "checked";?> value="3"> 
    <label> 4</label> 
    <input type="radio" name="rating" <?php if (isset($rating) && $rating=="4") echo "checked";?> value="4"> 
    <label>5</label> 
    <input type="radio" name="rating" <?php if (isset($rating) && $rating=="5") echo "checked";?> value="5"> 
</div> 

Answer 1

Вашего MAR куп должен выглядеть следующим образом:

<div> 
    <div class="star belowchecked"> 
     <input type="radio" name="rating" value="1"> 
    </div> 
    <div class="star"> 
     <input type="radio" name="rating" value="2"> 
    </div> 
    <div class="star"> 
     <input type="radio" name="rating" value="3"> 
    </div> 
    <div class="star"> 
     <input type="radio" name="rating" value="4"> 
    </div> 
    <div class="star"> 
     <input type="radio" name="rating" value="5"> 
    </div> 
</div> 

И CSS, чтобы соответствовать:

.star{ 


    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    margin-right: 8px; 
    transition: all .25s ease; 
} 

.star:active { 
    transform: scale(0.75); 
} 
.star:after { 
    content:""; 
    display: block; 
    top: -5px; 
    left: -5px; 
    position: absolute; 
    height: calc(100% + 10px); 
    width: calc(100% + 10px); 
    background-image: url("//cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/star.png"); 
    background-size: cover; 
} 

.star.belowchecked:after { 
    content:""; 
    display: block; 
    top: -5px; 
    left: -5px; 
    position: absolute; 
    height: calc(100% + 10px); 
    width: calc(100% + 10px); 
    background-image: url("//findicons.com/files/icons/1620/crystal_project/128/keditbookmarks.png"); 
    background-size: cover; 
} 

и JQuery, чтобы показать звезды:

$(function() { 

    $(".star").click(function() { 
     var x = $(this).find("input[type='radio']"); 
     var val = x.val(); 
     x.attr("checked", true); 
     $(".star input[type='radio']").each(function() { 
      if ($(this).val() <= val) { 
       $(this).parent().addClass("belowchecked"); 
      } else { 
       $(this).parent().removeClass("belowchecked"); 
      } 
     }); 
    }); 

}); 

Here's a fiddle.