如何在页面中多次使用星级(输入)字段 [英] How to use star rating (input) field many times in a page
本文介绍了如何在页面中多次使用星级(输入)字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是jquery新手.我想在具有相同ID的页面中多次使用此星级(输入)字段(因为它会动态变化).请让我知道我该怎么做.
I am new to jquery. I want to use this star rating(input) field several times in a page with same ids(as it will come dynamic). Please let me know how i do this.
Jsfiddle: http://jsfiddle.net/9xrkr/ >
<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/
这篇关于如何在页面中多次使用星级(输入)字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文