更改为光标:默认情况下,具有的玩家是非活动类,只有在其他玩家选择后

Change to cursor:default on players with is-inactive class, only after others selected

本文关键字:玩家 非活动 其他 选择 情况下 默认 光标      更新时间:2023-09-26

目标

  • 我有一份60名冰球运动员的名单,他们都有is-inactivecursor:pointer作为它们的默认状态引用的div是<div class="picked is-inactive">
  • 当一个玩家被点击时,它会被"星号",并且它的类别会切换至CCD_ 4。每个位置的球员人数最多(两名守门员、六名防守队员、十二名前锋(
  • 当达到最大数量时尚未选择/点击的位置应该具有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();

样式.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>

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

  • 从不需要光标的玩家中移除is-inactive
  • 创建一个名为F.E.pointercursor、仅具有cursor: pointer属性的特殊类,并在需要时添加和删除该类。(显然,正在从is-inactive类中删除该属性
  • 我看到,当满了时,您会添加full类。您可以将cursor: default属性添加到该类中,以覆盖其他属性。注意,对于这个类覆盖旧类,它必须在CSS文件中的第一个之后声明:

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