javascript - Opencart定制: server-side script for rating

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灰色类(class):.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-alternative 工作正常，但我对 JSON-script 仍然有问题:这是 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'));

});