无法将元素的 remove/toggle class 恢复为“is-inactive”

Question

我在哪里

选择曲棍球运动员后，将其默认 is-inactive class 切换为 is-active 表示。我还添加了 full 的 class 以防止选择 picked.is-inactive 的 class 的玩家。

问题

我无法再次点击一名 class 为 picked.is-active 的球员，一旦达到最大球员人数（四分之二的守门员，十五分之六的后卫和十二在 31 个前锋中）已经达到该类别，以便 "deselect" 一名球员并将他们的 class 切换回默认 is-inactive，然后选择另一名球员。

为了解决这个问题，我觉得我的函数中需要一个 .removeClass() 和一个 if-else 语句？

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

index.html

<div class="player player--goalie year--1970">
                    <div class="tooltip tooltip--tall">
                        <p class="tooltip__name">Glen Hanlon</p>
                        <p class="tooltip__hometown"><span>Hometown:</span> Brandon, Man.</p>
                        <p class="tooltip__years"><span>Years Played:</span> 1974-1977</p>
                        <div class="tooltip__stats--inline">
                            <div class="stats__group stats--games">
                                <p class="stats__header">GP</p>
                                <p class="stats__number--games">172</p>
                            </div>

                            <div class="stats__group stats--goalsag">
                                <p class="stats__header">GA</p>
                                <p class="stats__number">4.22</p>
                                <p class="stats__number">3.99</p>
                                <p class="stats__number stats__number--goalsag">3.09</p>
                            </div>

                            <div class="stats__group stats--savep">
                                <p class="stats__header">SAV%</p>
                                <p class="stats__number">.892</p>
                                <p class="stats__number">.891</p>
                                <p class="stats__number stats__number--savep">.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 stats__number--shutouts">4</p>
                                <p class="stats__number">4</p>
                            </div>
                        </div> <!-- tooltip__stats--inline -->
                    </div> <!-- tooltip -->
                    <div class="player__headshot player--hanlon">
                        <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
                    </div>
                    <p class="player__name">Glen Hanlon</p>
                    <p class="player__position">Goalie</p>
                </div>

Answer 1

当存在class full时，您正在做return false

尝试这样 return false：

if ($(this).find(".picked.is-inactive.full").length > 0) return false;

然后像这样else到removeClass

$(".player--goalie").find(".picked").removeClass("full");

这里有完整的例子https://jsfiddle.net/5pq8z54z/

Answer 2

您需要从播放器中删除类 'is-completed' 和 'full' 并隐藏提交按钮：

    /*-------------------------------------
    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");
            }else{
                $(".checkmark--goalie").removeClass("is-completed");
                $(".player--goalie").find(".picked").removeClass("full");
            }

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

            if (starredForwards === maxFowards) {
                $(".checkmark--forward").addClass("is-completed");
                $(".player--forward").find(".picked").addClass("full");
            }else{
                $(".checkmark--forward").removeClass("is-completed");
                $(".player--forward").find(".picked").removeClass("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");
            }else{
                $(".btn--submit").removeClass("slideLeft");
                $(".btn--submit").hide();                
            }
        });
} countSelected();

无法将元素的 remove/toggle class 恢复为“is-inactive”

Unable to remove/toggle class of element back to `is-inactive`

javascript

jquery

function

addclass

removeclass

我在哪里

问题

scripts.js

index.html