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类（见下图）。

Average Rating: custom Opencart Edit-Form

这些东西都很好用。但是现在我想做一些我没有经验的事情，我会很感激我的问题。

问题：当鼠标指针悬停在灰色星星上时，它必须变为蓝色，就像之前的那样。当点击星形时，我的隐藏输入必须获得所单击的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'));

});

Opencart自定义：用于评级

1 个答案: