if/else-if 语句不添加类的问题

Question

目标

我有一份 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 (sn-p)

/*-------------------------------------
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();

Answer 1

超班，

part a) 正如西蒙所说，哈哈，该条件仅处理一个真实条件，并且在满足第一个“真实”条件后不关心另一个。它们可以同时为真，因此只需将其分解为 3 个 if 语句

part b) Click EventListener 在“播放器”类上，您将指针事件设置为 .picked.is-inactive ... 因此您必须检查点击事件的顶部：

if ($(this).find('.picked.is-inactive').css('pointer-events') === "none") return;

最终解决方案

    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
            // Class of `full` is a placeholder, but it also removes the cursor:pointer
            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");
            }
        });
} countSelected();

Answer 2

您应该将 if/ese 条件更改为

if (starredGoaltenders === maxGoaltenders) {
      $(".checkmark--goalie").addClass("is-completed");
      $(".player--goalie").find(".picked.is-inactive").css("pointer-events", "none");
}
else {
     $(".checkmark--goalie").removeClass("is-completed");
     $(".player--goalie").find(".picked.is-inactive").css("pointer-events", "auto");
}

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");
}
else {
     ...
}

问题是，如果第一个条件为真，则不再处理另一个条件。您还应该为每个if 条件添加一个else，以便在用户取消选择活跃玩家时恢复更改。