目的

Question

目的

我有60名曲棍球运动员的名单。当挑选每个位置（守门员，防守队员，前锋）的最大球员数时，应该发生两件事：

is-completed的班级已添加到icon-checkmark，其中。{ 应该将它从灰色变为黄色以显示任务已完成
该位置的其他未被选中的球员应该是由于.css（）pointer-events: none

问题

a）班级is-completed只会添加到checkmark--goalie，而不会添加到与其他位置相关的其他复选标记，所以我觉得有些东西if / else-if语句错误。

b）即使他们的位置（2名守门员，6名防守队员，12名前锋）的最大球员数被选中，您仍然可以点击{{1}级别的其他玩家}

的index.html

is-inactive

scripts.js（摘录）

// 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>

Answer 1

您应该将您的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 {
     ...
}

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

Answer 2

chao ban，

部分a）正如西蒙所说，哈哈，条件只处理一个真实的条件，并且在第一个＆＃34;真正的＆＃34;之后它并不关心另一个条件。条件得到满足。它们一下子都可以成为现实，所以只需将其分解为3个if语句

部分b）点击EventListener on＆＃34; player＆＃34; class，你将指针事件设置为.picked.is-inactive ...因此你必须在click事件的顶部检查：

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

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

目的

问题

的index.html

scripts.js（摘录）

2 个答案:

最终解决方案