Доброго времени суток всем.Вот уже 3 дня не могу решить задачу с звездным плагином.
Проблема состоит в том что при клике на кнопку он показывает средний рейтинг этих 5-и чисел.Мне нужно чтобы без клика он работал.
$(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="Нажми" 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>