How to toggle between classes using jquery

Question

I have a rating star in my page, and I'm trying to toggle back and forth between "fa fa-star" class and "fa fa-star checked" class I have read about this here: Javascript/Jquery to change class onclick? And this is my implementation (it didn't work)

$('.fa fa-star').click(function() { $(this).toggleClass('fa fa-star'); $(this).toggleClass('fa fa-star checked'); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <span onclick="rating" class="fa fa-star"></span>
    <span onclick="rating" class="fa fa-star checked"></span>
    <span onclick="rating" class="fa fa-star checked"></span>
    <span onclick="rating" class="fa fa-star checked"></span>
    <span onclick="rating" class="fa fa-star"></span>
</div>

Try $(this).toggleClass('fa-star fa-checked'); -- the checked class is not a FontAwesome icon class. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Apr 4, 2022 at 0:48
You could use an if statement to see if the class exists and if it does then toggle the other class you want. — Michael
– Michael, Commented Apr 4, 2022 at 0:50
I supplemented my answer with a solution with the same behavior as that of prettyInPink (minimum 1 star) — Mister Jojo
– Mister Jojo, Commented Apr 10, 2022 at 23:04

prettyInPink · Accepted Answer · 2022-04-11 00:26:35Z

1

You simply need to toggle the checked class for a simplified rating.

$('.stars i').click(function() {

  $('.stars i.checked').removeClass('checked');
  for (let i = 0; i < $(this).index() + 2; i++) {

      $('.stars i:nth-of-type(' + i + ')').addClass('checked');

  }

});

.stars i {
  color: #ccc;
  cursor: pointer;
}

.stars i.checked {
  color: #dfd022;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="stars">
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
</div>

If you need the option of being able to convert stars back to '0', you can use the following option:

$('.stars i').click(function() {
  
  if($(this).index() === 0 && $('.stars i.checked').length === 1){
    $('.stars i.checked').removeClass('checked');
  } else {
    $('.stars i.checked').removeClass('checked');
    for (let i = 0; i < $(this).index() + 2; i++) {
        $('.stars i:nth-of-type(' + i + ')').addClass('checked');
    }
  }

});

.stars i {
  color: #ccc;
  cursor: pointer;
}

.stars i.checked {
  color: #dfd022;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="stars">
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
</div>

edited Apr 11, 2022 at 0:26

answered Apr 4, 2022 at 0:52

prettyInPink

3,4683 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Yogi Over a year ago

Works, but I think OP will need to rethink this design. Star ratings usually highlight all the stars below rather than single stars. +1

prettyInPink Over a year ago

@Roberto, def agreed, updated it with somewhat better approach.

Mister Jojo Over a year ago

your code does not work: there is no way to return to zero stars as soon as one or more has been selected

prettyInPink Over a year ago

@MisterJojo, I agree there could be improvements (depending on needs), but it does work, many rating systems only allow a minimum of 1 star. Having said that, your code acts weird as well, if you select an amount of stars less than a previously specified amount, it does not show the correct amount, but one less, because of toggling the class. Peace amigo!

Mister Jojo Over a year ago

this toggle is in the tittle requirement...

|

Mister Jojo · Accepted Answer · 2022-04-10 23:00:31Z

maybe that...

document.querySelectorAll('i.fa-star')
.forEach( (star,indx,arr) =>
  {
  star.onclick =_=> 
    {
    let chk = star.classList.toggle('checked')
    arr.forEach((s,i) =>
      s.classList.toggle('checked', i<indx ? true: i===indx ? chk : false))
    }
  })

body {
  background : darkslategrey;
  font-size  : 24px;
  }
i.fa-solid.fa-star {
  color  : lightgray;
  cursor : pointer;
  }
i.fa-solid.fa-star.checked {
  color  : gold;
  }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

<div>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
</div>

If you want the same as prettyInPink's answer :

document.querySelectorAll('i.fa-star')
.forEach( (star,indx,arr) => star.onclick =_=> 
  arr.forEach((s,i) => s.classList.toggle('checked', i<=indx )))

body {
  background : darkslategrey;
  font-size  : 24px;
  }
i.fa-solid.fa-star {
  color  : lightgray;
  cursor : pointer;
  }
i.fa-solid.fa-star.checked {
  color  : gold;
  }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

<div>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
</div>

Collectives™ on Stack Overflow

How to toggle between classes using jquery

2 Answers 2

6 Comments

If you want the same as prettyInPink's answer :

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

If you want the same as prettyInPink's answer :

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related