目标

我有一份60名曲棍球运动员的名单。当每个位置的球员(守门员、防守队员、前锋(的最大数量被选中时，应该发生两件事：

• is-completed的类被添加到icon-checkmark应将其从灰色变为黄色，以显示任务已完成
• 该位置的其他未被选中的球员应由于.css((pointer-events: none而无法单击

问题

a(类is-completed只被添加到checkmark--goalie中，而没有添加与其他位置相关的其他复选标记，所以我觉得if/else-if语句有问题。

b(即使选择了其位置上的最大球员数量(2名守门员、6名防守队员、12名前锋(，您仍然可以点击is-inactive 级别的其他球员

index.html

// Checkmarks
        <section class="main__selected">
            <p class="main__check"><i class="icon-checkmark checkmark--goalie fa fa-check" aria-hidden="true"></i>Pick 2 out of 10 of the goalies</p>
            <p class="main__check"><i class="icon-checkmark checkmark--defencemen fa fa-check" aria-hidden="true"></i>Pick 6 out of the 20 defencemen</p>
            <p class="main__check"><i class="icon-checkmark checkmark--forward fa fa-check" aria-hidden="true"></i>Pick 12 of the 30 forwards</p>
        </section> <!-- .main__selected -->

// Player
    <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--goalsag">
                                <p class="stats__header">GA</p>
                                <p class="stats__number">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--save">
                                <p class="stats__header">SAV%</p>
                                <p class="stats__number">.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">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>

scripts.js(片段(

/*-------------------------------------
COUNT SELECTED
--------------------------------------*/
function countSelected() {
    $(".player").on("click", function(){
        // 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, the other unstarred players in that group cannot be clicked unless one is deselected first
        if (starredGoaltenders === maxGoaltenders) {
            $(".checkmark--goalie").addClass("is-completed");
            $(".player--goalie").find(".picked.is-inactive").css("pointer-events", "none");
        } else if (starredDefencemen === maxDefencemen) {
            $(".checkmark--defencemen").addClass("is-completed");
            $(".player--defencemen").find(".picked.is-inactive").css("pointer-events", "none");
        } else if (starredForwards === maxFowards) {
            // Not working unless done first?
            $(".checkmark--forward").addClass("is-completed");
            $(".player--forward").find(".picked.is-inactive").css("pointer-events", "none");
        }
    });
} countSelected();