CODEWITHSUNDEEP
javascriptjquery
Praveen
Praveen

Reputation: 1802

How to use star rating (input) field many times in a page

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>

Upvotes: 1

Views: 2709

Answers (2)

bozdoz
bozdoz

Reputation: 12870

Try changing ids to classnames, and try narrowing the selectors to relate to this, which should relate to the element that is triggered:

$('#rateitHover')

changes to:

$('.rateit')

Also, you need to get the tooltip that is within the element:

$('.tooltip')

changes to:

$(this).find('.tooltip')

And the $('#rateitHover').rateit('value') should be changed to $(this).rateit('value')

UPDATE

Apparently, since this is all served up dynamically, you can't make the above adjustments. Therefore, I would recommend you use a different script.

I've made something for this purpose in the past: http://codepen.io/bozdoz/pen/ClmLI

See if this code would suit your purposes. Notice that the stars all have classes, instead of ID's. It should be easier to manipulate. Hope this helps (someone). :)

HTML:

<div class="clearfix stars">    
  <div class="darn">Oh no!</div>
  <div class="brilliant">Thanks!</div>  
  <div class="starHolder">  
    <div class="star">  
      <div class="star">    
        <div class="star">  
          <div class="star">    
            <div class="star"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.stars {width:450px;margin:5% auto;position:relative}
.star {width:66px;height:50px;background:url(http://www.prportfolio.ca/bjd/images/star.png) no-repeat;cursor:pointer;transition: all .5s;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s;}
.star:hover, .star.on {background-position: -66px 0px;}
.star .star { margin-left: 66px; }
.starHolder {width:345px;margin:0 auto;}
.darn {color:#5c2222}
.brilliant {color:#a0b9d8;right:0px}
.darn, .brilliant {line-height:50px;font-weight:bold;display:none;position:absolute}

JS (jQuery):

$('.star').click(function(e){
e.stopPropagation();
var i = $('.stars .star').index(this);
if(i==0||i==5){
$(this).parents('.stars').find('.darn').show().delay(100).fadeOut(1000);
}
if(i==4||i==9){
$(this).parents('.stars').find('.brilliant').show().delay(100).fadeOut(1000);
}
$(this).addClass('on').find('.star').removeClass('on').end().parents('.star').addClass('on');
});

Upvotes: 1

Paul Rad
Paul Rad

Reputation: 4882

You must use classes (not the unique id of the element)

Try this:

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/

Upvotes: 2

Related Questions