Andrew Nguyen Andrew Nguyen - 1 year ago 43
jQuery Question

Unable to remove/toggle class of element back to `is-inactive`

Where I'm at

After selecting a hockey player, which is denoted by switching their default
class to
. I'm also adding a class of
to prevent players with a class of
from being selected.


I'm unable to click on a player a second time with a class of
once the maximum number of players (two out of four goalies, six out of fifteen defencemen and twelve out of thirty-one forwards) in that category has been reached in order to "deselect" a player and switch their class back to the default
and then choose another player.

To solve this problem I feel like I need a .removeClass() and an if-else statement of sorts inside my function?



function countSelected() {
$(".player").on("click", function(){

// Checks if the maximum number of players have been selected
// If so, return false and then do nothing
// If not, the class will toggle from `is-inactive` to `is-active`
if ($(this).find(".picked.full").length > 0) return false;
$(this).find(".picked").toggleClass("is-inactive is-active");

// Count the number of players with stars
var starredGoaltenders = $(".player--goalie").find("").length;
var starredDefencemen = $(".player--defencemen").find("").length;
var starredForwards = $(".player--forward").find("").length;

console.log(starredGoaltenders, starredDefencemen, starredForwards);

// The number of starred players for each position cannot exceed the following numbers
var maxGoaltenders = 2;
var maxDefencemen = 6;
var maxFowards = 12;

// If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
if (starredGoaltenders === maxGoaltenders) {

if (starredDefencemen === maxDefencemen) {

if (starredForwards === maxFowards) {

// If all the conditions are met show the submit vote button
if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
} countSelected();


<div class="player player--goalie year--1970">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Glen Hanlon</p>
<p class="tooltip__hometown"><span>Hometown:</span> Brandon, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1974-1977</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number--games">172</p>

<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number">4.22</p>
<p class="stats__number">3.99</p>
<p class="stats__number stats__number--goalsag">3.09</p>

<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number">.892</p>
<p class="stats__number">.891</p>
<p class="stats__number stats__number--savep">.906</p>

<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">4</p>
<p class="stats__number">4</p>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--hanlon">
<div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
<p class="player__name">Glen Hanlon</p>
<p class="player__position">Goalie</p>

Answer Source

You are doing return false when class full exists but you don't remove it when number of selections is not full.

Try doing return false like this:

if ($(this).find("").length > 0) return false;

And do else to removeClass like this


Full example here