Opencart自定義：評分的服務器端腳本

Question

我已經將自定義表添加到Opencart數據庫中，其中有一個字段/列，名爲average_rating（值= null至5）。

在我的（自定義）模板（.tpl文件）中，我添加了一個代碼來獲取並顯示數據庫當前記錄的評分。

這裏是.tpl文件中的代碼：

<div class="form-group"> 
    <label class="col-sm-2 control-label" for="input-average_rating"><?php echo $entry_average_rating; ?></label> 
    <div class="col-sm-10"> 
     <input type="hidden" name="average_rating" value="<?php echo $average_rating; ?>" id="input-average_rating" /> 

     <?php for ($i = 0; $i < $average_rating; $i++) { ?> 
      <div class="rating_hover" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div> 
     <?php } ?> 

     <?php for ($i = $average_rating; $i <= 4; $i++) { ?> 
      <div class="rating_normal" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div> 
     <?php } ?> 

    </div> 
</div> 

爲藍星星，我用.rating_hover類，爲灰的：.rating_normal類（見下圖）。

所有這些東西正常工作。但是現在我想做一些我沒有經驗的事情，我希望能夠提出任何關於我的問題的建議。

問題：當鼠標指針位於灰色星形上時，它必須變成藍色，就像它之前的那樣。當點擊一個星號時，我隱藏的輸入必須得到被點擊的div元素的title屬性的值。我不想寫一個客戶端JavaScript來做到這一點。有人可以提供一個關於如何使用JSON或AJAX做到這一點...或以某種方式請？

我的意思是：是這樣的：

$('div[id=\'r*\']').onmouseover({ 
    // for (i=$average_rating; i<=[current_id]; i++) { 
    // ??? document.getElementById('r[i]').style.ClassName = 'someclass'; 
}); 

---

Javascript的替代工作正常，但我仍然有JSON腳本問題： 這是怎麼了JavaScript的工作： 每一個DIV元素裏面我添加下面的命令：

<div ... onclick="rOnClick(<?php echo ($i+1) ?>);" onmouseover="rOnMouseOver(<?php echo ($i+1) ?>);" onmouseout="rOnMouseOut(<?php echo ($i+1) ?>);" ... > 

而且我的JavaScript功能現在，如下：

<script type="text/javascript"> 
     function rOnMouseOver(id) { 
    var ar = parseInt(document.getElementById('input-average_rating').value); 

    if (isNaN(ar)) { 
     ar = 0; 
     } 

    for(i = (ar+1); i <= id; i++) { 
     document.getElementById('r' + i).className = 'rating_hover'; 
     } 
    } 

function rOnMouseOut(id) { 
    var ar = parseInt(document.getElementById('input-average_rating').value); 

    if (isNaN(ar)) { 
     ar = 0; 
     } 

    for(i = 1; i <= ar; i++) { 
     document.getElementById('r' + i).className = 'rating_hover'; 
     } 

    for(i = (ar+1); i <= id; i++) { 
     document.getElementById('r' + i).className = 'rating_normal'; 
     } 
    } 

function rOnClick(id) { 
    document.getElementById('input-average_rating').value = id; 

    for(i = 1; i <= id; i++) { 
     document.getElementById('r' + i).className = 'rating_hover'; 
     } 

    for(i = (id+1); i <= 5; i++) { 
     document.getElementById('r' + i).className = 'rating_normal'; 
     } 
    } 
    </script> 

Answer 1

請在所有評級div中添加另一個css級別的評級。此外，您還需要爲現有/點擊額定值添加「額定」級別的其他課程。然後添加下面的腳本：

$('.rating').hover(
    // Handles the mouseover 
    function() { 
    $(this).prevAll().andSelf().addClass('rating_over'); 
    $(this).nextAll().removeClass('rating_normal'); 
    }, 
    // Handles the mouseout 
    function() { 
    $(this).prevAll().andSelf().removeClass('ratings_over'); 
    $('.rated').addClass('ratings_over'); // back to rated one 

    } 
); 



$('.rating').bind('click', function() { 
    $('.rating').removeClass('rated'); 
    $(this).addClass('rated'); 
    $('#input-average_rating').val($(this).attr('title')); 

});