CODEWITHSUNDEEP
javascript
Arioso
Arioso

Reputation: 35

How to have more than one set of ratings on the page

I'm playing around with the simple star rater and have to sets of ratings - http://codepen.io/anon/pen/WvOevd

  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3"><i></i>
  <input type="radio" name="rating" value="4"><i></i>
  <input type="radio" name="rating" value="5"><i></i>
</span>
<strong class="choice">Choose a rating</strong>
<br>
<span class="star-rating">
  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3"><i></i>
  <input type="radio" name="rating" value="4"><i></i>
  <input type="radio" name="rating" value="5"><i></i>
</span>
<strong class="choice">Choose a rating</strong>

As you can see, by clicking on one set it'll change/effect the other set of ratings. How should I go about so that I can have two functional sets?

Upvotes: 1

Views: 26

Answers (1)

Shryme
Shryme

Reputation: 1570

Here is your exemple working

This is because they are all using the same group (rating)

Try changing the second group to something else like this:

<span class="star-rating">
  <input type="radio" name="otherGroupName" value="1"><i></i>
  <input type="radio" name="otherGroupName" value="2"><i></i>
  <input type="radio" name="otherGroupName" value="3"><i></i>
  <input type="radio" name="otherGroupName" value="4"><i></i>
  <input type="radio" name="otherGroupName" value="5"><i></i>
</span>
//I also changed your class here to have a unique one
<strong class="choiceOtherGroupName">Choose a rating</strong>

I also changed your js to this:

$(':radio').change(
  function(){
    if (this.name === "rating")
      $('.choiceRating').text( this.value + ' stars' );
    else if(this.name === "otherGroupName")
      $('.choiceOtherGroupName').text( this.value + ' stars' );
  } 
)

This code will check the group of your radio button to target the correct label ! If it's from the group rating, it will output to choiceRating, if it's from the second group (choiceOtherGroupName) It will output to the second label !

Upvotes: 1

Related Questions