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

Question

我是 jquery 的新手。我想在具有相同 ID 的页面中多次使用此星级(输入)字段(因为它将动态显示)。请让我知道我是怎么做到的。

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>

Answer 1

必须使用类(不是元素的唯一id)

试试这个:

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]);
    }
});

fiddle http://jsfiddle.net/9xrkr/1/