CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Alex Cernatescu
Alex Cernatescu

Reputation: 13

Need to make js work multiple times in a star rating system,bootstrap

everyone. I am using a simple star rating system,and I used it on the page 3 times. When i click one ,the other 2 take the same value. Need to make the js work for each one. Please be kind,I am a noob in js. Thanks in advance.

HTML

<div class="star-rating" id="star-rating-2"> 
  <span class="fa fa-star-o" data-rating="1"></span>
  <span class="fa fa-star-o" data-rating="2"></span>
  <span class="fa fa-star-o" data-rating="3"></span>
  <span class="fa fa-star-o" data-rating="4"></span>
  <span class="fa fa-star-o" data-rating="5"></span>
  <input type="hidden" name="rating-stars" class="rating-value" value="1">
</div>

JavaScript

var $star_rating = $('.star-rating .fa');

var SetRatingStar = function() {
  return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar();
});

SetRatingStar();

Upvotes: 1

Views: 528

Answers (2)

omikes
omikes

Reputation: 8513

I changed just one line of the jquery and this seems to function correctly. The Click event stores the direct dom object you are trying to access, try this but with hidden instead of text inputs:

var $star_rating = $('.star-rating .fa');

var SetRatingStar = function () {
    return $star_rating.each(function () {
        if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
            return $(this).removeClass('fa-star-o').addClass('fa-star');
        } else {
            return $(this).removeClass('fa-star').addClass('fa-star-o');
        }
    });
};

$star_rating.on('click', function () {
    $(this).parent().find('input').val($(this).data('rating')); // <- edited line
    return SetRatingStar();
});

SetRatingStar();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="star-rating" id="star-rating-2"> <span class="fa fa-star-o" data-rating="1">1</span>
 <span class="fa fa-star-o" data-rating="2">2</span>
 <span class="fa fa-star-o" data-rating="3">3</span>
 <span class="fa fa-star-o" data-rating="4">4</span>
 <span class="fa fa-star-o" data-rating="5">5</span>

    <input type="text" name="rating-stars" class="rating-value" value="1" />
</div>
<div class="star-rating" id="star-rating-2"> <span class="fa fa-star-o" data-rating="1">1</span>
 <span class="fa fa-star-o" data-rating="2">2</span>
 <span class="fa fa-star-o" data-rating="3">3</span>
 <span class="fa fa-star-o" data-rating="4">4</span>
 <span class="fa fa-star-o" data-rating="5">5</span>

    <input type="text" name="rating-stars" class="rating-value" value="1" />
</div>
<div class="star-rating" id="star-rating-2"> <span class="fa fa-star-o" data-rating="1">1</span>
 <span class="fa fa-star-o" data-rating="2">2</span>
 <span class="fa fa-star-o" data-rating="3">3</span>
 <span class="fa fa-star-o" data-rating="4">4</span>
 <span class="fa fa-star-o" data-rating="5">5</span>

    <input type="text" name="rating-stars" class="rating-value" value="1" />
</div>

Upvotes: 0

justtry
justtry

Reputation: 639

I guess you are looking on something like this, please check http://jsfiddle.net/unb3n8s1/3/, you need to find parent element and loop only on his children

var $star_rating = $('.star-rating .fa');

var SetRatingStar = function($star_rating_parent) {
  return $star_rating_parent.find('.fa').each(function() {
    if (parseInt($star_rating_parent.find('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $(this).siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar($(this).parent());
});

Upvotes: 1

Related Questions