Javascript 将具有非活动类的元素的游标设置为默认值 客观的

一旦每个类别的球员（两名守门员、六名防守队员、十二名前锋）的最大数量被选定，剩下的

被挑选的
类球员处于非活动状态
应设置为
光标：默认值

澄清问题
默认情况下，所有玩家的职业
处于非活动状态
，我要做的是，只有在其他玩家被选中并将其职业切换到
处于活动状态后，才尝试设置
光标：默认值

即。两名守门员被选中，现在有
类处于活动状态
并在悬停时采取
光标：指针
行为。这类球员总共有十名，其他八名守门员是
非活动的
，应该有
光标：默认
行为

问题

我正试图将光标的css切换回默认设置，但即使是
处于非活动状态的玩家
上仍有
光标：指针

样式表
index.html
可以使用
.class1.class2
选择具有多个类的元素。尝试在CSS末尾添加以下代码

.player .is-active.picked {
  cursor: pointer;
}

注意：在类名中最好避免使用
-
。使用
isInactive
或
isInactive来代替
处于非活动状态


.player{
显示：内联块；
边缘顶部：15px；
右边距：20px；
垂直对齐：顶部；
游标：默认值；
位置：相对位置；
}
.player.is-inactive{
游标：默认值；
}

布莱恩·埃尔德

家乡：橡树湖，男人

播放年份：1992-1997
GP
110
GA
2.00

3.12
3.46
2.70
SAV%
.909
.886
.884
.906
因此

0
0
3
2
布莱恩·埃尔德

守门员

如果您不介意使用javascript解决方案，那么在第一次单击某个播放机之后，向.is inactive播放机添加一个类将提供一个解决方案

编辑我的第一个示例有点不对劲，因为.is-inactive和.is-active类不适用于.player对象，而是适用于子体，但是以下代码段提供了正确的实现：

第二次编辑与OP讨论他的期望后，以下实现更适合他的需要。我将.is active和.is inactive类移动到.player元素中，然后将以下行添加到单击函数中：

$(".player").filter(".is-active").removeClass("not-picked");
$(".player").filter(".is-inactive").addClass("not-picked");

这就是CSS：

.not-picked {
  cursor: default;
}

因此，现在每当单击一名球员时，它将选择或取消选择该球员，光标将改变，除非球员类型（即守门员）已满


/*-------------------------------------
选定的计数
--------------------------------------*/
函数countSelected（）{
$（“.player”）。在（“单击”，函数（）{
//检查是否已选择最大玩家数
//否则，该类将从'is inactive'切换到'is active'`
if（$（this）.hasClass（“full”））返回false；
$（this.toggleClass（“处于非活动状态即处于活动状态”）；
$（“.player”）.filter（“.is active”）.removeClass（“未拾取”）；
$（“.player”）.filter（“.is inactive”）.addClass（“未拾取”）；
//数一数明星球员的数量
var starredGoaltenders=$（“.player--goalie”）.filter（“.is active”）.length；
var starredDefencemen=$（“.player--defencemen”）.filter（“.is active”）.length；
var starredForwards=$（“.player--forward”）.filter（“.is active”）.length；
console.log（星型转发器、星型转发器、星型转发器）；
//每个位置的明星球员数量不能超过以下数字
var maxGoaltenders=2；
var-maxDefencemen=6；
var maxFowards=12；
//如果明星玩家的数量达到其最大值，则会在相应的复选标记中添加一个“is completed”类，以指示任务已完成
if（带星号的goaltenders===maxGoaltenders）{
$（“.checkmark--goalie”）.addClass（“完成”）；
$（“.player--goalie”）.addClass（“full”）；
}
if（starredDefencemen===maxDefencemen）{
$（“.checkmark--defencemen”）.addClass（“已完成”）；
$（“.player--defencemen”）.addClass（“完整”）；
}
if（星号向前===maxFowards）{
$（“.checkmark--forward”）.addClass（“已完成”）；
$（“.player--forward”）.addClass（“full”）；
}
//如果满足所有条件，则显示提交投票按钮
if（starredGoaltenders===maxGoaltenders&&starredefencemen===maxDefencemen&&starredForwards===maxFowards）{
$（“.btn--submit”）.show（）；
$（“.btn--submit”）.addClass（“slideLeft”）；
}
});
}countSelected（）
.player{
显示：内联块；
边缘顶部：15px；
右边距：20px；
光标：指针；
垂直对齐：顶部；
位置：相对位置；
}
1.没选{
.player .is-active.picked {
  cursor: pointer;
}

$(".player").filter(".is-active").removeClass("not-picked");
$(".player").filter(".is-inactive").addClass("not-picked");

.not-picked {
  cursor: default;
}