更改为光标：默认在具有 is-inactive 类的玩家上，仅在其他人被选中后

Question

目标

• 我有 60 名曲棍球运动员的名单，他们都有 is-inactive 与 cursor:pointer 作为它们的 默认状态。 被引用的 div 是 <div class="picked is-inactive">
• 当玩家被点击时，它会被“加星标”并且它的类别会切换 到is-active。每个位置的球员人数上限（两名守门员、六名后卫、十二名前锋）。
• 当达到最大人数时，剩余的玩家人数 未选择/未点击的位置，应具有cursor: default 行为。

问题

现在，即使在一个位置上选择了最大数量的玩家之后，即使是未被点击且处于is-inactive 状态的玩家仍然具有cursor:pointer 行为。

scripts.js

    /*-------------------------------------
    COUNT SELECTED
    --------------------------------------*/

    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(".picked.is-active").length;
            var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
            var starredForwards = $(".player--forward").find(".picked.is-active").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) {
                $(".checkmark--goalie").addClass("is-completed");
                $(".player--goalie").find(".picked").addClass("full");
            }

            if (starredDefencemen === maxDefencemen) {
                $(".checkmark--defencemen").addClass("is-completed");
                $(".player--defencemen").find(".picked").addClass("full");
            }

            if (starredForwards === maxFowards) {
                $(".checkmark--forward").addClass("is-completed");
                $(".player--forward").find(".picked").addClass("full");
            }

            // If all the conditions are met show the submit vote button
            if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
                $(".btn--submit").show();
                $(".btn--submit").addClass("slideLeft");
            }
        });
} countSelected();

style.css

.player {
  position: relative;
  display: inline-block;
  margin-top: 15px;
  margin-right: 20px;
  vertical-align: top;
  cursor: pointer;
}

index.html

<div class="player player--goalie year--1990">
                    <div class="tooltip tooltip--tall">
                        <p class="tooltip__name">Brian Elder</p>
                        <p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
                        <p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
                        <div class="tooltip__stats--inline">
                            <div class="stats__group stats--games">
                                <p class="stats__header">GP</p>
                                <p class="stats__number stats__number--games">110</p>
                            </div>

                            <div class="stats__group stats--goalsag">
                                <p class="stats__header">GA</p>
                                <p class="stats__number stats__number--goalsag">2.00</p>
                                <p class="stats__number">3.12</p>
                                <p class="stats__number">3.46</p>
                                <p class="stats__number">2.70</p>
                            </div>

                            <div class="stats__group stats--savep">
                                <p class="stats__header">SAV%</p>
                                <p class="stats__number stats__number--savep">.909</p>
                                <p class="stats__number">.886</p>
                                <p class="stats__number">.884</p>
                                <p class="stats__number">.906</p>
                            </div>

                            <div class="stats__group stats--shutouts">
                                <p class="stats__header">SO</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number stats__number--shutouts">3</p>
                                <p class="stats__number">2</p>
                            </div>
                        </div> <!-- tooltip__stats--inline -->
                    </div> <!-- tooltip -->
                    <div class="player__headshot player--elder">
                        <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
                    </div>
                    <p class="player__name">Brian Elder</p>
                    <p class="player__position">Goalie</p>
                </div>

Answer 1

如果您的玩家始终拥有is-inactive 类，并且您在is-inactive 类中定义了cursor: pointer 属性，那么他们将始终启用cursor: pointer 事物。你有一些选择：

• 从不需要光标的玩家身上移除 is-inactive 类。
• 仅使用 cursor: pointer 属性创建一个名为 F.E. pointercursor 的特殊类，并在需要时添加和删除该类。 （显然从您的 is-inactive 类中删除了该属性。

• 我看到当已满时，您添加了 full 类。您可以将cursor: default 属性添加到该类，以覆盖其他属性。请注意，对于此类覆盖旧的类，它必须在 CSS 文件中的第一个类之后声明：

  .is-inactive {
    cursor: pointer;
  }
  .full { // This way, `full` will override `is-active`.
    cursor: default;
  }