星级评分平均数

Question

我正在使用star rating库。当您点击该按钮时，它会显示4星评级的平均评分。但是我需要先显示平均值而不先点击。

例如，您将其中一个列悬停并单击1个评级表3/5，它必须显示所有4列的平均值第一列3/5秒0第三个0和第四个0并且此处为0.75。

$(document).ready(function() {
  $('#question1').rating('create');
});

$(document).ready(function() {
  $("#question1").rating({
    glyphicon: true,
    stars: 5,
    min: 0,
    max: 5,
    step: 1,
    showClear: true,
    size: 'xs',
    starCaptions: {
      1: 'Irrelevant',
      2: 'It Matters',
      3: 'Important',
      4: 'Very Important',
      5: 'Mandatory'
    },
    starCaptionClasses: {
      1: 'label label-info',
      2: 'label label-primary',
      3: 'label label-success',
      4: 'label label-warning',
      5: 'label label-danger'
    }
  });
});


$(document).ready(function() {
  $('#question1').on('rating.change', function(event, value) {
    console.log(value);
  });
});

$(document).ready(function() {
  $('#question3').rating('create');
});

$(document).ready(function() {
  $("#question3").rating({
    glyphicon: true,
    stars: 5,
    min: 0,
    max: 5,
    step: 1,
    showClear: true,
    size: 'xs',
    starCaptions: {
      1: 'Irrelevant',
      2: 'It Matters',
      3: 'Important',
      4: 'Very Important',
      5: 'Mandatory'
    },
    starCaptionClasses: {
      1: 'label label-info',
      2: 'label label-primary',
      3: 'label label-success',
      4: 'label label-warning',
      5: 'label label-danger'
    }
  });
});

$(document).ready(function() {
  $('#question3').on('rating.change', function(event, value) {
    console.log(value);
  });
});

$(document).ready(function() {
  $('#question2').rating('create');
});

$(document).ready(function() {
  $("#question2").rating({
    glyphicon: true,
    stars: 5,
    min: 0,
    max: 5,
    step: 1,
    showClear: true,
    size: 'xs',
    starCaptions: {
      1: 'Irrelevant',
      2: 'It Matters',
      3: 'Important',
      4: 'Very Important',
      5: 'Mandatory'
    },
    starCaptionClasses: {
      1: 'label label-info',
      2: 'label label-primary',
      3: 'label label-success',
      4: 'label label-warning',
      5: 'label label-danger'
    }
  });
});

$(document).ready(function() {
  $('#question2').on('rating.change', function(event, value) {
    console.log(value);
  });
});

$(document).ready(function() {
  $('#question4').rating('create');
});

$(document).ready(function() {
  $("#question4").rating({
    glyphicon: true,
    stars: 5,
    min: 0,
    max: 5,
    step: 1,
    showClear: true,
    size: 'xs',
    starCaptions: {
      1: 'Irrelevant',
      2: 'It Matters',
      3: 'Important',
      4: 'Very Important',
      5: 'Mandatory'
    },
    starCaptionClasses: {
      1: 'label label-info',
      2: 'label label-primary',
      3: 'label label-success',
      4: 'label label-warning',
      5: 'label label-danger'
    }
  });
});

$(document).ready(function() {
  $('#question4').on('rating.change', function(event, value) {
    console.log(value);
  });
});

.rating-loading {
  width: 25px;
  height: 25px;
  font-size: 0px;
  color: #fff;
  background: transparent url('../img/loading.gif') top left no-repeat;
  border: none;
}


/*
 * Stars
 */

.rating-fa {
  font-family: 'FontAwesome';
  padding-left: 1px;
}

.rating-fa .rating-stars:before {
  padding-left: 1px;
}

.rating-gly {
  font-family: 'Glyphicons Halflings';
}

.rating-gly-star {
  font-family: 'Glyphicons Halflings';
  padding-left: 2px;
}

.rating-gly-star .rating-stars:before {
  padding-left: 2px;
}

.rating-lg .rating-gly-star,
.rating-lg .rating-gly-star .rating-stars:before {
  padding-left: 4px;
}

.rating-xl .rating-gly-star,
.rating-xl .rating-gly-star .rating-stars:before {
  padding-left: 2px;
}

.rating-active {
  cursor: default;
}

.rating-disabled {
  cursor: not-allowed;
}

.rating-uni {
  font-size: 1.2em;
  margin-top: -5px;
}

.rating-container {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #e3e3e3;
  overflow: hidden;
}

.rating-container:before {
  content: attr(data-content);
}

.rating-container .rating-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
  transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

.rating-container .rating-stars:before {
  content: attr(data-content);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  color: #fde16d;
}

.rating-container-rtl:before {
  content: attr(data-content);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl .rating-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #e3e3e3;
  transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

.rating-container-rtl .rating-stars:before {
  content: attr(data-content);
}


/**
 * Rating sizes
 */

.rating-xl {
  font-size: 4.89em;
}

.rating-lg {
  font-size: 3.91em;
}

.rating-md {
  font-size: 3.13em;
}

.rating-sm {
  font-size: 2.5em;
}

.rating-xs {
  font-size: 2em;
}


/**
 * Clear rating button
 */

.star-rating .clear-rating,
.star-rating-rtl .clear-rating {
  color: #aaa;
  cursor: not-allowed;
  display: inline-block;
  vertical-align: middle;
  font-size: 60%;
}

.clear-rating-active {
  cursor: pointer !important;
}

.clear-rating-active:hover {
  color: #843534;
}

.star-rating .clear-rating {
  padding-right: 5px;
}


/**
 * Caption
 */

.star-rating .caption,
.star-rating-rtl .caption {
  color: #999;
  display: inline-block;
  vertical-align: middle;
  font-size: 55%;
}

.star-rating .caption {
  padding-left: 5px;
}

.star-rating-rtl .caption {
  padding-right: 5px;
}


/**
 * Print
 */

@media print {
  .rating-container,
  .rating-container:before,
  .rating-container-rtl .rating-stars,
  .rating-container-rtl .rating-stars:before {
    color: #f3f3f3!important;
  }
  .star-rating .clear-rating,
  .star-rating-rtl .clear-rating {
    display: none;
  }
}

body {
  padding-bottom: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/css/star-rating.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/js/star-rating.js"></script>

<form id="fld">
  <input id="question1" class="rating rating-loading">
  <input id="question2">
  <input id="question3">
  <input id="question4">
</form>
<div class="entirety">
  <p class="amount">Общая оценка
    <p id='d'>0</p>
</div>
<div>
  <input type="button" value="click" onclick="try{ ww() } catch(e) {alert(e)}">
</div>

<script>
  function ww() {
    var oi = document.getElementById('fld').getElementsByTagName('input');
    var val = 0
    for (var i = 0; i < oi.length; i++) {
      val += +oi[i].value;
    };
    val = val / oi.length;
    document.getElementById('d').textContent = val;
  }
</script>

Answer 1

所以你想在有人按下其中一个评级对象后解除ww功能。

$(document).ready(function() {
  $('#question1').on('rating.change', function(event, value) {
    console.log(value); // this line should fire function 'ww'
  });
});

我会用类rating标记所有输入 所以你可以对它进行each。

var val = 0;
$("input.rating").each(function (i) {
    val += $(this).val();
});
val = val / $("input.rating").length;
$('#d').text(val);

如此结合将会：

$(document).ready(function() {
  $('#question1').on('rating.change', function(event, value) {
    var val = 0;
    $("input.rating").each(function (i) {
        val += $(this).val();
    });
    val = val / $("input.rating").length;
    $('#d').text(val);
  });
});

编辑刚刚注意到您分别对每个输入ID都有更改事件。一旦你对每个输入应用了css类评级，你应该或者可以用$('#question1')改变$("input.rating")这对我来说是个好主意（对我来说）

编辑2 无法忍受巨大的jQuery代码，所以我重写了它：

$(document).ready(function() {
      $('.rating').rating({
        glyphicon: true,
        stars: 5,
        min: 0,
        max: 5,
        step: 1,
        showClear: true,
        size: 'xs',
        starCaptions: {
          1: 'Irrelevant',
          2: 'It Matters',
          3: 'Important',
          4: 'Very Important',
          5: 'Mandatory'
        },
        starCaptionClasses: {
          1: 'label label-info',
          2: 'label label-primary',
          3: 'label label-success',
          4: 'label label-warning',
          5: 'label label-danger'
        }
      });
      $('.rating').on('rating.change', function(event, value) {
        Recalculate();
      });
      $('.rating').on('rating:clear', function(event) {
        alert("should work according to docs, but does not..");
        Recalculate();
      });
    });
    
    function Recalculate()
    {
        var val = 0;
        $("input.rating").each(function (i) {
            val += parseFloat($(this).val());
        });
        val = val / $("input.rating").length;
        $('#d').text(val);
    }

.rating-loading {
  width: 25px;
  height: 25px;
  font-size: 0px;
  color: #fff;
  background: transparent url('../img/loading.gif') top left no-repeat;
  border: none;
}

/*
 * Stars
 */

.rating-fa {
  font-family: 'FontAwesome';
  padding-left: 1px;
}

.rating-fa .rating-stars:before {
  padding-left: 1px;
}

.rating-gly {
  font-family: 'Glyphicons Halflings';
}

.rating-gly-star {
  font-family: 'Glyphicons Halflings';
  padding-left: 2px;
}

.rating-gly-star .rating-stars:before {
  padding-left: 2px;
}

.rating-lg .rating-gly-star,
.rating-lg .rating-gly-star .rating-stars:before {
  padding-left: 4px;
}

.rating-xl .rating-gly-star,
.rating-xl .rating-gly-star .rating-stars:before {
  padding-left: 2px;
}

.rating-active {
  cursor: default;
}

.rating-disabled {
  cursor: not-allowed;
}

.rating-uni {
  font-size: 1.2em;
  margin-top: -5px;
}

.rating-container {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #e3e3e3;
  overflow: hidden;
}

.rating-container:before {
  content: attr(data-content);
}

.rating-container .rating-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
  transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

.rating-container .rating-stars:before {
  content: attr(data-content);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  color: #fde16d;
}

.rating-container-rtl:before {
  content: attr(data-content);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl .rating-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #e3e3e3;
  transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

.rating-container-rtl .rating-stars:before {
  content: attr(data-content);
}

/**
 * Rating sizes
 */

.rating-xl {
  font-size: 4.89em;
}

.rating-lg {
  font-size: 3.91em;
}

.rating-md {
  font-size: 3.13em;
}

.rating-sm {
  font-size: 2.5em;
}

.rating-xs {
  font-size: 2em;
}

/**
 * Clear rating button
 */

.star-rating .clear-rating,
.star-rating-rtl .clear-rating {
  color: #aaa;
  cursor: not-allowed;
  display: inline-block;
  vertical-align: middle;
  font-size: 60%;
}

.clear-rating-active {
  cursor: pointer !important;
}

.clear-rating-active:hover {
  color: #843534;
}

.star-rating .clear-rating {
  padding-right: 5px;
}

/**
 * Caption
 */
.star-rating .caption,
.star-rating-rtl .caption {
  color: #999;
  display: inline-block;
  vertical-align: middle;
  font-size: 55%;
}
.star-rating .caption {
  padding-left: 5px;
}
.star-rating-rtl .caption {
  padding-right: 5px;
}
body {
  padding-bottom: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/css/star-rating.css" />
<script src="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/js/star-rating.js"></script>

<form id="fld">
    <input id="question1" class="rating rating-loading">
    <input id="question2" class="rating">
    <input id="question3" class="rating">
    <input id="question4" class="rating">
</form>
<div class="entirety">
    <p class="amount">Общая оценка</p>
    <p id='d'>0</p>
</div>

Answer 2

在每次评级更改时调用函数'ww';

我清理了你的jquery以删除多个document.ready;

希望这有帮助

$('#question1').rating('create');



$("#question1").rating({
glyphicon: true,
stars: 5,
min: 0,
max: 5,
step: 1,
showClear: true,
size: 'xs',
starCaptions: {
  1: 'Irrelevant',
  2: 'It Matters',
  3: 'Important',
  4: 'Very Important',
  5: 'Mandatory'
},
starCaptionClasses: {
  1: 'label label-info',
  2: 'label label-primary',
  3: 'label label-success',
  4: 'label label-warning',
  5: 'label label-danger'
}
});




$('#question1').on('rating.change', function(event, value) {
console.log(value);
ww();
});



$('#question3').rating('create');



$("#question3").rating({
glyphicon: true,
stars: 5,
min: 0,
max: 5,
step: 1,
showClear: true,
size: 'xs',
starCaptions: {
  1: 'Irrelevant',
  2: 'It Matters',
  3: 'Important',
  4: 'Very Important',
  5: 'Mandatory'
},
starCaptionClasses: {
  1: 'label label-info',
  2: 'label label-primary',
  3: 'label label-success',
  4: 'label label-warning',
  5: 'label label-danger'
}
});



$('#question3').on('rating.change', function(event, value) {
console.log(value);
ww();
});



$('#question2').rating('create');



$("#question2").rating({
glyphicon: true,
stars: 5,
min: 0,
max: 5,
step: 1,
showClear: true,
size: 'xs',
starCaptions: {
  1: 'Irrelevant',
  2: 'It Matters',
  3: 'Important',
  4: 'Very Important',
  5: 'Mandatory'
},
starCaptionClasses: {
  1: 'label label-info',
  2: 'label label-primary',
  3: 'label label-success',
  4: 'label label-warning',
  5: 'label label-danger'
}
});



$('#question2').on('rating.change', function(event, value) {
console.log(value);
ww();
});



$('#question4').rating('create');



$("#question4").rating({
glyphicon: true,
stars: 5,
min: 0,
max: 5,
step: 1,
showClear: true,
size: 'xs',
starCaptions: {
  1: 'Irrelevant',
  2: 'It Matters',
  3: 'Important',
  4: 'Very Important',
  5: 'Mandatory'
},
starCaptionClasses: {
  1: 'label label-info',
  2: 'label label-primary',
  3: 'label label-success',
  4: 'label label-warning',
  5: 'label label-danger'
}
});



$('#question4').on('rating.change', function(event, value) {
console.log(value);
ww();
});

.rating-loading {
  width: 25px;
  height: 25px;
  font-size: 0px;
  color: #fff;
  background: transparent url('../img/loading.gif') top left no-repeat;
  border: none;
}


/*
 * Stars
 */

.rating-fa {
  font-family: 'FontAwesome';
  padding-left: 1px;
}

.rating-fa .rating-stars:before {
  padding-left: 1px;
}

.rating-gly {
  font-family: 'Glyphicons Halflings';
}

.rating-gly-star {
  font-family: 'Glyphicons Halflings';
  padding-left: 2px;
}

.rating-gly-star .rating-stars:before {
  padding-left: 2px;
}

.rating-lg .rating-gly-star,
.rating-lg .rating-gly-star .rating-stars:before {
  padding-left: 4px;
}

.rating-xl .rating-gly-star,
.rating-xl .rating-gly-star .rating-stars:before {
  padding-left: 2px;
}

.rating-active {
  cursor: default;
}

.rating-disabled {
  cursor: not-allowed;
}

.rating-uni {
  font-size: 1.2em;
  margin-top: -5px;
}

.rating-container {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #e3e3e3;
  overflow: hidden;
}

.rating-container:before {
  content: attr(data-content);
}

.rating-container .rating-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
  transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

.rating-container .rating-stars:before {
  content: attr(data-content);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  color: #fde16d;
}

.rating-container-rtl:before {
  content: attr(data-content);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl .rating-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #e3e3e3;
  transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

.rating-container-rtl .rating-stars:before {
  content: attr(data-content);
}


/**
 * Rating sizes
 */

.rating-xl {
  font-size: 4.89em;
}

.rating-lg {
  font-size: 3.91em;
}

.rating-md {
  font-size: 3.13em;
}

.rating-sm {
  font-size: 2.5em;
}

.rating-xs {
  font-size: 2em;
}


/**
 * Clear rating button
 */

.star-rating .clear-rating,
.star-rating-rtl .clear-rating {
  color: #aaa;
  cursor: not-allowed;
  display: inline-block;
  vertical-align: middle;
  font-size: 60%;
}

.clear-rating-active {
  cursor: pointer !important;
}

.clear-rating-active:hover {
  color: #843534;
}

.star-rating .clear-rating {
  padding-right: 5px;
}


/**
 * Caption
 */

.star-rating .caption,
.star-rating-rtl .caption {
  color: #999;
  display: inline-block;
  vertical-align: middle;
  font-size: 55%;
}

.star-rating .caption {
  padding-left: 5px;
}

.star-rating-rtl .caption {
  padding-right: 5px;
}


/**
 * Print
 */

@media print {
  .rating-container,
  .rating-container:before,
  .rating-container-rtl .rating-stars,
  .rating-container-rtl .rating-stars:before {
    color: #f3f3f3!important;
  }
  .star-rating .clear-rating,
  .star-rating-rtl .clear-rating {
    display: none;
  }
}

body {
  padding-bottom: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/js/star-rating.js"></script>

<form id="fld">
  <input id="question1" class="rating rating-loading">
  <input id="question2">
  <input id="question3">
  <input id="question4">
</form>
<div class="entirety">
  <p class="amount">Общая оценка
    <p id='d'>0</p>
</div>
<div>
  <input type="button" value="click" onclick="try{ ww() } catch(e) {alert(e)}">
</div>

<script>
  function ww() {
    var oi = document.getElementById('fld').getElementsByTagName('input');
    var val = 0
    for (var i = 0; i < oi.length; i++) {
      val += +oi[i].value;
    };
    val = val / oi.length;
    document.getElementById('d').textContent = val;
  }
</script>

Answer 3

因此，您的代码已大幅减少，平均值已按照您在问题中提到的计算出来。检查/尝试以下代码：

$(".buttonClass").click(function() {
  var sum = 0;
  $('input.rating').each(function() {
    sum += parseFloat($(this).val());
  });
  var avg =  sum / parseInt($('input.rating').length);
  $("#d").text(avg);
  console.log('Average: ', avg);
});

$(document).ready(function() {
  var sumArray = [];
  $('.rating').rating('create');
  $(".rating").rating({
    glyphicon: true,
    stars: 5,
    min: 0,
    max: 5,
    step: 1,
    showClear: true,
    size: 'xs',
    starCaptions: {
      1: 'Irrelevant',
      2: 'It Matters',
      3: 'Important',
      4: 'Very Important',
      5: 'Mandatory'
    },
    starCaptionClasses: {
      1: 'label label-info',
      2: 'label label-primary',
      3: 'label label-success',
      4: 'label label-warning',
      5: 'label label-danger'
    }
  });
});

.rating-loading {
  width: 25px;
  height: 25px;
  font-size: 0px;
  color: #fff;
  background: transparent url('../img/loading.gif') top left no-repeat;
  border: none;
}


/*
 * Stars
 */

.rating-fa {
  font-family: 'FontAwesome';
  padding-left: 1px;
}

.rating-fa .rating-stars:before {
  padding-left: 1px;
}

.rating-gly {
  font-family: 'Glyphicons Halflings';
}

.rating-gly-star {
  font-family: 'Glyphicons Halflings';
  padding-left: 2px;
}

.rating-gly-star .rating-stars:before {
  padding-left: 2px;
}

.rating-lg .rating-gly-star,
.rating-lg .rating-gly-star .rating-stars:before {
  padding-left: 4px;
}

.rating-xl .rating-gly-star,
.rating-xl .rating-gly-star .rating-stars:before {
  padding-left: 2px;
}

.rating-active {
  cursor: default;
}

.rating-disabled {
  cursor: not-allowed;
}

.rating-uni {
  font-size: 1.2em;
  margin-top: -5px;
}

.rating-container {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #e3e3e3;
  overflow: hidden;
}

.rating-container:before {
  content: attr(data-content);
}

.rating-container .rating-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
  transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

.rating-container .rating-stars:before {
  content: attr(data-content);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  color: #fde16d;
}

.rating-container-rtl:before {
  content: attr(data-content);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl .rating-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #e3e3e3;
  transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

.rating-container-rtl .rating-stars:before {
  content: attr(data-content);
}


/**
 * Rating sizes
 */

.rating-xl {
  font-size: 4.89em;
}

.rating-lg {
  font-size: 3.91em;
}

.rating-md {
  font-size: 3.13em;
}

.rating-sm {
  font-size: 2.5em;
}

.rating-xs {
  font-size: 2em;
}


/**
 * Clear rating button
 */

.star-rating .clear-rating,
.star-rating-rtl .clear-rating {
  color: #aaa;
  cursor: not-allowed;
  display: inline-block;
  vertical-align: middle;
  font-size: 60%;
}

.clear-rating-active {
  cursor: pointer !important;
}

.clear-rating-active:hover {
  color: #843534;
}

.star-rating .clear-rating {
  padding-right: 5px;
}


/**
 * Caption
 */

.star-rating .caption,
.star-rating-rtl .caption {
  color: #999;
  display: inline-block;
  vertical-align: middle;
  font-size: 55%;
}

.star-rating .caption {
  padding-left: 5px;
}

.star-rating-rtl .caption {
  padding-right: 5px;
}


/**
 * Print
 */

@media print {
  .rating-container,
  .rating-container:before,
  .rating-container-rtl .rating-stars,
  .rating-container-rtl .rating-stars:before {
    color: #f3f3f3!important;
  }
  .star-rating .clear-rating,
  .star-rating-rtl .clear-rating {
    display: none;
  }
}

body {
  padding-bottom: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/css/star-rating.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/js/star-rating.js"></script>

<form id="fld">
  <input id="question1" class="rating rating-loading">
  <input id="question2" class="rating rating-loading">
  <input id="question3" class="rating rating-loading">
  <input id="question4" class="rating rating-loading">
</form>
<div class="entirety">
  <p class="amount">Общая оценка
    <p id='d'>0</p>
</div>
<div>
  <input type="button" value="click" class="buttonClass">
</div>