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-alternative 工作正常，但 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'));

});