Javascript 我如何让我的星级评分累积和平均，以生成一个全面的产品评论？_Javascript_Php_Html_Css

Javascript 我如何让我的星级评分累积和平均，以生成一个全面的产品评论？

javascript php html css

Javascript 我如何让我的星级评分累积和平均，以生成一个全面的产品评论？,javascript,php,html,css,Javascript,Php,Html,Css,我正在为我的在线酱油销售页面创建一个电子商务我已经有了代码，用户可以用图形方式对每个产品进行评分，问题是我无法存储这些评分并取平均值来显示产品的总体评分我的HTML代码和java使用的两个脚本如下所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rating test</title> <lin

我正在为我的在线酱油销售页面创建一个电子商务

我已经有了代码，用户可以用图形方式对每个产品进行评分，问题是我无法存储这些评分并取平均值来显示产品的总体评分

我的HTML代码和java使用的两个脚本如下所示：

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>rating test</title>
    <link rel="stylesheet" href="../src/rating.css" type="text/css" media="screen" title="Rating CSS">
</head>

<body>

    <div class="container" style="margin-top:35px">
      <div class="ratings">
        <input type="radio" name="star" id="rating" value="1" />
        <input type="radio" name="star" id="rating" value="2" />
        <input type="radio" name="star" id="rating" value="3" />
        <input type="radio" name="star" id="rating" value="4" />
        <input type="radio" name="star" id="rating" value="5" />
      </div>
      <span class="info"></span>
    </div>

  <script type="text/javascript" src="../js/jquery.min.js"></script>

  <script>
  ;(function($){
      $.fn.rating = function(callback){

          callback = callback || function(){};

          // each for all item
          this.each(function(i, v){

              $(v).data('rating', {callback:callback})
                  .bind('init.rating', $.fn.rating.init)
                  .bind('set.rating', $.fn.rating.set)
                  .bind('hover.rating', $.fn.rating.hover)
                  .trigger('init.rating');
          });
      };

      $.extend($.fn.rating, {
          init: function(e){
              var el = $(this),
                  list = '',
                  isChecked = null,
                  childs = el.children(),
                  i = 0,
                  l = childs.length;

              for (; i < l; i++) {
                  list = list + '<a class="star" title="' + $(childs[i]).val() + '" />';
                  if ($(childs[i]).is(':checked')) {
                      isChecked = $(childs[i]).val();
                  };
              };

              childs.hide();

              el
                  .append('<div class="stars">' + list + '</div>')
                  .trigger('set.rating', isChecked);

              $('a', el).bind('click', $.fn.rating.click);
              el.trigger('hover.rating');
          },
          set: function(e, val) {
              var el = $(this),
                  item = $('a', el),
                  input = undefined;

              if (val) {
                  item.removeClass('fullStar');

                  input = item.filter(function(i){
                      if ($(this).attr('title') == val)
                          return $(this);
                      else
                          return false;
                  });

                  input
                      .addClass('fullStar')
                      .prevAll()
                      .addClass('fullStar');
              }

              return;
          },
          hover: function(e){
              var el = $(this),
                  stars = $('a', el);

              stars.bind('mouseenter', function(e){
                  // add tmp class when mouse enter
                  $(this)
                      .addClass('tmp_fs')
                      .prevAll()
                      .addClass('tmp_fs');

                  $(this).nextAll()
                      .addClass('tmp_es');
              });

              stars.bind('mouseleave', function(e){
                  // remove all tmp class when mouse leave
                  $(this)
                      .removeClass('tmp_fs')
                      .prevAll()
                      .removeClass('tmp_fs');

                  $(this).nextAll()
                      .removeClass('tmp_es');
              });
          },
          click: function(e){
              e.preventDefault();
              var el = $(e.target),
                  container = el.parent().parent(),
                  inputs = container.children('input'),
                  rate = el.attr('title');

              matchInput = inputs.filter(function(i){
                  if ($(this).val() == rate)
                      return true;
                  else
                      return false;
              });

              matchInput
                  .prop('checked', true)
                .siblings('input').prop('checked', false);

              container
                  .trigger('set.rating', matchInput.val())
                  .data('rating').callback(rate, e);
          }
      });

  })(jQuery);
  </script>
  <script>
  $('.ratings').rating(function(vote, event){
    $.ajax({
      url: '../src/insrating.php',
      type: 'GET',
      data: {rate:vote}
    }).done(function(info){
      $('.info').html("your vote: <b>"+vote+"</b>")
    })
  })
  </script>

</body>
</html>

.star{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABQCAYAAAAZQFV3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOFJREFUeNrsmEFoHFUYx9/MdHfTJRKzUhBaFiL1YghZCFQUIV6UQJuLWCgr8eKpIoiFSqsHQYrmYj14KHqxKAl6MbA5eCgKRVAMBhpCwIJQCETRQzTsNtnO7s74+17fbGc3M7OzZhUsHfjzdvd97/++973vff99Y/m+rwb5WL0Idz60h2nckTc8Nw2hncLmAnhtIB7i3VGan8VD8Dhebh+U8FOaX8Bh4EB48R8TQlai+QnkgMTxD/AYpFt9EULk0EyBD8Dn4BPT9TZ4CrwD6Wos4V+XrUdpXzQk4tUEkAFXwNUu+1fAWWO7anADLDLJTkCYpf0K3DQe3Ui5oUI6B8ShlyBstZfMMiXoX4MV8GZKQgnJcXA6nKPtGJoE/gZ8Cy6mIJPwnIJsL3ZTIB2h+U6WANZjyE6Aj8Cz3WT7TooJ7HUwneDdc+BaFFnc0SuCzQTCTWOT+iwfN6cjWJ6clo9NzOS5Bcb6IZTZj5pU+syEYNV8XzA2Y6lOCptyhGbDeDFPnJa6TlGZ5rxJ/nxkSRPCACR5EUyHf4sCNjOgENVn/ecVe+CEy8vLWgJmZ2fd1IRra2vxSbe5eYlmu1gsXo6zmZycTKcpkEn6vC61kM+FQYiUeDdvauP5Ay0ZjyIlgKVv9bVkiBwQVJRX2YwWkKLxrhxB+qYSPaxUKrESANHVrh2PlQAzqSbskAA6UkkA5B0SICvRSzb5ddrMWu4jh8umSLwckLVjSKClWJ6SwsrM76fwLpCAM4x1I9OGjhrN8+AkAyYSyGTDnhEHjCPxeYhBagmIIvtXJOBQkgSY5Z01/76umAy4lbpiG5IqzQuG6Alz9LLmf+IP5hh+AfmxnoSQdUgAg5a6JuuQgMiSFi7fJHkR9JQAbGbA/SoBi4uLWgLK5XIqCdBpkyQBZne3sTm4BGxsbLQlgM+DkYBsNjucyWQKaSXATvCuZFnWHIQqlxMVUOeMx/0RMsgBWgIgcyBVgqwwIwH0JUvAwsJChwQwuOQ4jrJtO/CsfQBc11We56lWqyXfOySALNgJdlmuWzNSB/P5vBKyyJnxMjxBs9mc2tvbEye+DN1l7uYhuaZvAXg1LaQyOOkRL3d3d8XLishHOEd1DMfHx7UEYLjCrCop2aXP2Mht4QxjoyWADi0BxGddZm80GjpWYSL5TfpkYnHAOBK/yxhoCZAl1et1PbharWrUajX9m/SJBESRJUlAr6fvW0CvZyyxOIQPN4kbnv1mlwQERGPhMbHli/Q5Yv5lSdDnSYelrlLWIQGRJS1cvjk1RdBTArCZAferBPT7IkjvcuP7t3pKADaxEpB5+r10FXv3x3kKqqUlgM+DkQB76OFhKzdycAnAo5KynTlraFTZQ4/gqH3ursd9EjLIAVoC7KGCAxFWNqSjWgLoS5aAfS+C7EzJcrLKOjSkrNwoFu0ToPz6n8pv3dFQXjPyRdA9CbDsk/ZDx5SQxWiAsg4X7vE361NedQsn/P0SELwIgmzaHiZMtpMcKK+pWlUuVF6j0v0iSMcw/+QFLQF+y13xbv/GpF4CWUt5tV+FTEsAY6MlgA4tASxlnaUo362yLGLlh2Lo1iCjj4nFAeNI/H9sDHbYxesEfcK//XvSoq9Fkf0/JCDqDWfV3I+TJGCLne19CzAvgtoS8OBF0APC6OdvAQYAj2xzC/IfXBsAAAAASUVORK5CYII=');
    background-position:left -2px;
    display:block;
    width:20px;
    height:16px;
    line-height:16px;
    float:left;
    cursor: pointer;
    zoom:1;
}

.fullStar{
    background-position:left -59px;
}

.stars{
    overflow: hidden;
}

.tmp_es{
    background-position:left -21px;
}

.tmp_fs{
    background-position:left -40px;
}

我认为一般的解决方案是在PHP中实现类似的东西，目的是拥有一个累加变量（$voteacomulate），并更改HTML$（'.Info'）的这一行。Html（“您的投票：“+vote+”）为$（'.info'）。html（“your vote:+voteacomulate+”）调用累加器变量，而不是用户给出的评级，但我对PHP的了解几乎为空

<?php
$vote = isNaN(vote) ? 0 : vote;
$voteacomulate += voteacomulate;