5星級的反饋表

直播成品預覽Here

如果有人需要幫助，做同樣的或類似的，請隨時詢問ID很樂意幫助

我創建了一個5星級反饋系統將數據提交給SQL中的數據庫。一切運作良好，除了形式之外，我希望如何。我目前有提交選定的等級數5比按鈕，而是我想他們是我的個性明星

而且

當用戶選擇1星級它改變了我的第二個明星形象，當圖像他們選擇更多的它改變了其他明星最多，他們選擇

這裏的星號是一個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>

來源

2015-09-22 RicPurcell

你有沒有考慮JQuery的/ JavaScript的處理選擇星星時的點擊事件？ –

你需要垃圾郵件保護表格將被敲打 –

你已經考慮過了，但是對它們知之甚少，所以不知道從哪裏開始有什麼想法？一旦代碼完成，也會添加垃圾郵件保護謝謝 – RicPurcell

你的三月KUP應該是這樣的：

<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.

來源

2015-09-22 21:32:38

謝謝你不工作，但？ – RicPurcell

哦，對不起。我只在Chrome中測試過它。 –

5星級的反饋表

回答

相關問題