Opencart定制：用于评级的服务器端脚本

Question

I've added a custom table into the Opencart database, where I have a field/column, called average_rating (value = null to 5 ).

In my (custom) template (.tpl file) I've added a code to get and show the rating of current record from database.

Here is the code within .tpl file:

<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>

For the blue-stars, I use .rating_hover class, for the grey-ones: .rating_normal class (see the picture below).

All this stuff works fine. But now I want to do something I have no experience with and I would appreciate any tip concerning my question.

Question: When a mouse pointer is over a grey star, it must become blue, like the ones before it. And when clicked on a star, my hidden input must get the value of title attribute of the clicked div-element. I wouldn't like to write a client-side Javascript to do this. Could somebody give a tip on how to do this with JSON or AJAX... or somehow please?

I mean: something like this:

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

---

Javascript-alternative works fine, but I still have problems with JSON-script: This is how javascript works: Inside every div-element I added following commands:

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

And my Javascript functions are now, as follows:

  <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

Please add another css class 'rating' in all rating divs. Also you will be needed to add a different class 'rated' for existing/clicked rated value. Then add following script:

$('.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'));

});