评级功能重复问题-JavaScript
我使用了评级功能,并希望复制该功能,以便在同一页面上使用多次。我找不到功能性的复制品。关于我能做些什么或者我能对Javascript做些什么更改,有什么想法吗 我使用下面的html代码来显示一个评级功能,将结果发布到另一个页面。评级功能允许用户选择介于1和10之间的评级,并且情感图标会发生变化。原文可以在这里看到评级功能重复问题-JavaScript,javascript,jquery,rating-system,Javascript,Jquery,Rating System,我使用了评级功能,并希望复制该功能,以便在同一页面上使用多次。我找不到功能性的复制品。关于我能做些什么或者我能对Javascript做些什么更改,有什么想法吗 我使用下面的html代码来显示一个评级功能,将结果发布到另一个页面。评级功能允许用户选择介于1和10之间的评级,并且情感图标会发生变化。原文可以在这里看到 <div class='sliderholder'> <div class='sliderholderinside'> <div class
<div class='sliderholder'>
<div class='sliderholderinside'>
<div class="slider">
<div class="ui-slider-handle">
<div class="smiley">
<svg viewBox="0 0 34 10" version="1.1">
<path d=""></path>
</svg>
</div>
</div>
<div class="text">
<strong></strong>
<form method='POST' name='formnumbers' action='ratingcomplete.php' onsubmit='DoSubmit();' enctype='multipart/form-data'>
<textarea style='display:none;' type='text' name='numinput' id='numinput'><strong></strong></textarea>
<input type='submit' value='Add rating' class='btn btn-secondary goldbtn'/>
</form>
</div>
</div>
</div>
</div>
var step = 10;
$(".slider").each(function () {
var self = $(this);
var slider = self.slider({
create: function () {
self.find('.text strong').text(self.slider('value'));
setPathData(self.find('.smiley').find('svg path'), self.slider('value'));
DoSubmit(self.find('.smiley').find('svg path'), self.slider('value'));
},
slide: function (event, ui) {
self.find('.text strong').text(ui.value);
setPathData(self.find('.smiley').find('svg path'), ui.value);
DoSubmit(self.find('.smiley').find('svg path'), ui.value);
},
range: 'min',
min: 1,
max: step,
value: 1,
step: 1 });
});
function setPathData(path, value) {
var firstStep = 6 / step * value;
var secondStep = 2 / step * value;
path.attr('d', 'M1,' + (7 - firstStep) + ' C6.33333333,' + (2 + secondStep) + ' 11.6666667,' + (1 + firstStep) + ' 17,' + (1 + firstStep) + ' C22.3333333,' + (1 + firstStep) + ' 27.6666667,' + (2 + secondStep) + ' 33,' + (7 - firstStep));
}
function DoSubmit(path, value){
var firstStep = 6 / step * value;
var secondStep = 2 / step * value;
path.attr('d', 'M1,' + (7 - firstStep) + ' C6.33333333,' + (2 + secondStep) + ' 11.6666667,' + (1 + firstStep) + ' 17,' + (1 + firstStep) + ' C22.3333333,' + (1 + firstStep) + ' 27.6666667,' + (2 + secondStep) + ' 33,' + (7 - firstStep));
document.formnumbers.numinput.value = value;
return true;
}