如何檢索評級系統上點擊的星星的值

Question

我在PHP工作的一個項目是不真正瞭解ajax，javascript或json的大部分內容，但我知道如果指向正確的方向，我可以做到這一點。

我有一個審查的形式（POST），在表單上我有一個5開始評價，到目前爲止，我已經能夠使開始在懸停改變顏色，使用這樣的：

<div class=rating> 
    <div class="star_1 ratings_stars"></div> 
    <div class="star_2 ratings_stars"></div> 
    <div class="star_3 ratings_stars"></div> 
    <div class="star_4 ratings_stars"></div> 
    <div class="star_5 ratings_stars"></div> 
</div> 

上JavaScript的我有：

$('.ratings_stars').hover(

     // Handles the mouseover 

     function() { 

      $(this).prevAll().andSelf().addClass('ratings_over'); 


     }, 

     // Handles the mouseout 

     function() { 

      $(this).prevAll().andSelf().removeClass('ratings_over'); 

     } 

    ); 

在我的CSS文件，我有

.ratings_stars 
    { 
     background: url('./images/star_blank.png') no-repeat; //images with blank star 
    } 

.ratings_over 
    { 
     background: url('./images/star_overs.png') no-repeat; //colored star 
    } 

兩個問題我現在有是：

1. 能夠保留被點擊的星星上的'.ratings_over'類以及它之前的星星，而不是它之後的星星。

2. 給每個啓動值，所以當第三一個正在被點擊，我應該與表單一起被提交的值（很明顯，我天璣認爲其可能的）

總的來說，我思考也許使用複選框的評級，以便能夠提交值與表格，但我將如何實現懸停效果複選框？或者我只是做，然後檢查框？

通過改變javascript來：

$('.ratings_stars').hover(

     // Handles the mouseover 

     function() { 

      $(this).prevAll().andSelf().addClass('ratings_over'); 


     }, 

     // Handles the mouseout 

     function() { 

      $(this).nextAll().removeClass('ratings_over'); 

     } 

    ); 

現在高亮開始被保留，是有辦法檢查有多少hasClass與highted？然後將值傳遞給PHP，也許隱藏的輸入字段？

Answer 1

首先，您實際上並不需要使用jQuery來處理懸停效果;這隻能用CSS來完成！

.ratings_stars { 
    background: url('./images/star_blank.png') no-repeat; //images with blank star 
} 

.ratings_stars:hover { 
    background: url('./images/star_overs.png') no-repeat; //colored star 
} 

接下來，您可以將click事件綁定到啓動，並在那裏處理邏輯。當你點擊一個明星時，首先我們將刪除它們中的所有selected類，然後將selected添加到該類。

添加到您的CSS：

.ratings_stars.selected { 
    background: url('./images/star_overs.png') no-repeat; //colored star 
} 

和你的JavaScript

$('.ratings_star').click(function() { 
    $('.ratings_star').removeClass('selected'); // Removes the selected class from all of them 
    $(this).addClass('selected'); // Adds the selected class to just the one you clicked 
}); 

最後，我們需要一些方法來扶住值。有幾種方法可以解決這個問題。一種方法是使用jQuery的submit()方法來運行一些自定義代碼，然後提交表單。你可以找出選擇哪顆星星，然後將其作爲數據發送。

但是，我會建議一個更簡單的方法：爲評級添加一個隱藏的輸入字段，然後在您單擊某個星號時更新它。

添加到您的形式：

<!-- start the value at -1 so we know it hasn't been set yet --> 
<input type="hidden" id="rating" name="rating" value="-1"> 

我們將使用HTML數據屬性來存儲一個等級的值。改變你的明星HTML標記：

<div class=rating> 
    <div class="ratings_stars" data-rating="1"></div> 
    <div class="ratings_stars" data-rating="2"></div> 
    <div class="ratings_stars" data-rating="3"></div> 
    <div class="ratings_stars" data-rating="4"></div> 
    <div class="ratings_stars" data-rating="5"></div> 
</div> 

最後，我們修改Click事件處理程序：

$('.ratings_star').click(function() { 
    $('.ratings_star').removeClass('selected'); // Removes the selected class from all of them 
    $(this).addClass('selected'); // Adds the selected class to just the one you clicked 

    var rating = $(this).data('rating'); // Get the rating from the selected star 
    $('#rating').val(rating); // Set the value of the hidden rating form element 
}); 

現在，當表單提交，您將有rating字段，要麼是-1如果他們沒有選擇任何東西，或者1-5，如果他們選擇了！

如果星星是您表單中唯一的東西（即沒有別的東西需要提交），您可以放棄隱藏的元素，只需在點擊處理程序內發出$.post即可。