如何在页面中多次使用星级(输入)字段

<script src="http://www.radioactivethinking.com/rateit/src/jquery.rateit.js"></script><input type="range" min="0" max="5" value="0" step="1" id="backing1"> <div class="rateit" id="rateitHover" data-rateit-backingfld="#backing1" data-rateit-step="1" > <span class="tooltip" style="float:right; padding-left:10px;"></span></div><script>var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];var valueToDisplay$("#rateitHover").bind('over', function (event, value) { $('.tooltip').text(tooltipvalues[value - 1]);});$("#rateitHover").bind('reset', function () { $('.tooltip').text(''); $('#rateitHover').rateit('value')});$("#rateitHover").bind('rated', function (event, value) { $('.tooltip').text('R: ' + tooltipvalues[value - 1]);});$('#rateitHover').bind('mouseleave', function() { var v = $('#rateitHover').rateit('value'); if (v == 0) { $('.tooltip').html(''); } else { $('.tooltip').html('R: ' + tooltipvalues[v - 1]); }});</script>推荐答案您必须使用类(而不是元素的唯一ID)You must use classes (not the unique id of the element)尝试一下: HTML <input type="range" min="0" max="5" value="0" step="1" id="backing1"><input type="range" min="0" max="5" value="0" step="1" id="backing2"><div class="rateit" id="rateitHover1" data-rateit-backingfld="#backing1" data-rateit-step="1" > <span class="tooltip" style="float:right; padding-left:10px;"></span></div><div class="rateit" id="rateitHover2" data-rateit-backingfld="#backing2" data-rateit-step="1" > <span class="tooltip" style="float:right; padding-left:10px;"></span></div> JAVASCRIPT var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];var valueToDisplay$(".rateit").bind('over', function (event, value) { $(this).find('.tooltip').text(tooltipvalues[value - 1]);});$(".rateit").bind('reset', function () { $(this).find('.tooltip').text(''); $(this).rateit('value')});$(".rateit").bind('rated', function (event, value) { $(this).find('.tooltip').text('R: ' + tooltipvalues[value - 1]);});$('.rateit').bind('mouseleave', function() { var v = $(this).rateit('value'); if (v == 0) { $(this).find('.tooltip').html(''); } else { $(this).find('.tooltip').html('R: ' + tooltipvalues[v - 1]); }}); 小提琴 http://jsfiddle.net/9xrkr/1/ 这篇关于如何在页面中多次使用星级(输入)字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！