更改指针事件:无因if-语句，嵌套而引起的问题

Question

目标

• 我正在查看每一个位置的.player--forward，.player--defenseman和.player--goalie的.length，看看有多少玩家拥有is-selected级
• 当用户单击btn--add按钮将该播放机添加到其团队中时，将选择一个播放机。
• 一旦一个位置达到了可以选择的最大数量:两个前锋(pickedF === 2)或者三个防守队员(pickedD === 3)或者一个守门员(pickedG === 1)，，我想让那些没有等级is-selected的球员不能用"pointer-events:none"点击。

更新#1

• 现在，它似乎正在正确计数，但它不会将“指针-事件”更改为“指针-事件”，直到单击btn-add之后，因为if-语句的嵌套，而且我认为某些部分在不需要的情况下处于btn-add单击函数中。

scripts.js

function countPlayers(){
    $(".player").click(function(){

        // Select the current player
        var player = $(this);

        // Count number of players of each position that have been clicked
        var pickedF = $(".player--forward.is-selected").length;
        var pickedD = $(".player--defenseman.is-selected").length;
        var pickedG = $(".player--goalie.is-selected").length;

        // Grab the name of the player last clicked
        playerName = player.find(".player__name").text();

        // Literally magic.
        $(".btn--add").unbind("click");

        $(".btn--add").click(function(){

            // Ensures names don't match
            var spanText = $(".player__pick").eq(0).text();

            // Changes the opacity of a picked player to 0.5
            player.addClass("is-selected");

            if (player.hasClass("player--forward")) {
                if (spanText !== playerName) {
                    $(".player__pick--forward.is-empty").eq(0).html(playerName);
                    $(".player__pick--forward.is-empty").eq(0).removeClass("is-empty");

                    if (pickedF < 2) {
                        pickedF++;
                    } else if (pickedF === 2) {
                        $(".player--forward").not(":has(.is-selected)").css("pointer-events", "none");
                        console.log("Locked forwards");
                    } else {
                        $(".player--forward").css("pointer-events", "auto");
                    }
                }
            }

            if (player.hasClass("player--defenseman")) {
                if (spanText !== playerName) {
                    $(".player__pick--defenseman.is-empty").eq(0).html(playerName);
                    $(".player__pick--defenseman.is-empty").eq(0).removeClass("is-empty");

                    // Issue here
                    if (pickedD < 3) {
                        pickedD++;
                    } else if (pickedD === 3) {
                        $(".player--defenseman").not(":has(.is-selected)").css("pointer-events", "none");
                        console.log("Locked defensemen");
                    } else {
                        $(".player--defenseman").css("pointer-events", "auto");
                    }
                }
            }

            if (player.hasClass("player--goalie")) {
                if (spanText !== playerName) {
                    $(".player__pick--goalie.is-empty").eq(0).html(playerName);
                    $(".player__pick--goalie.is-empty").eq(0).removeClass("is-empty");

                    // Issue here
                    if (pickedD < 1){
                        pickedG++;
                    } else if (pickedG === 1) {
                        $(".player--goalie").not(":has(.is-selected)").css("pointer-events", "none");
                        console.log("Locked goalie");
                    } else {
                        $(".player--goalie").css("pointer-events", "auto");
                    }
                }
            }

            console.log(pickedF, pickedD, pickedG);
        });

        $(".btn--remove").click(function(){
            player.removeClass("is-selected");

            if (player.hasClass("player--forward")) {
                $(".player__pick--forward").eq(0).html("Pick a Forward");
                $(".player__pick--forward").eq(0).addClass("is-empty");
            }

            if (player.hasClass("player--defenseman")) {
                $(".player__pick--defenseman").eq(0).html("Pick a Defenseman");
                $(".player__pick--defenseman").eq(0).addClass("is-empty");
            }

            if (player.hasClass("player--goalie")) {
                $(".player__pick--goalie").eq(0).html("Pick a Goalie");
                $(".player__pick--goalie").eq(0).addClass("is-empty");
            }

            console.log(pickedF, pickedD, pickedG);
        });
    });
}

index.html

<div class="popup__text">
    <p class="popup__position">tk-position</p>
    <p class="popup__name">tk-name</p>
    <p class="popup__years">tk-years</p>
    <p class="popup__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ad dicta sunt unde, sed quae nihil inventore voluptates nulla voluptate laudantium nesciunt quo, aspernatur deleniti quod harum, nisi error doloribus.</p>
    <div class="popup__stats">
        <p>tk-stats</p>
    </div>
    <div class="buttons">
        <button class="btn--add">Add to team</button>
        <button class="btn--remove">Remove from team</button>
    </div>
</div>

​

<div class="player player--bobplager player--defenseman" data-id="11">
    <div class="player__info animated">
        <p class="player__name">Bob Plager</p>
        <p class="player__position">Defenseman</p>
    </div>
</div>

<div class="player player--shanahan player--forward" data-id="12">
    <div class="player__info animated">
        <p class="player__name">Brendan Shanahan</p>
        <p class="player__position">Forward</p>
    </div>
</div>

<div class="player player--hull player--forward" data-id="13">
    <div class="player__info animated">
        <p class="player__name">Brett Hull</p>
        <p class="player__position ">Forward</p>
    </div>
</div>

<div class="player player--elliott player--goalie" data-id="14">
    <div class="player__info animated">
        <p class="player__name">Brian Elliott</p>
        <p class="player__position ">Goalie</p>
    </div>
</div>

Answer 1

function countPlayers(){
    $(".player").click(function(){

        // Select the current player
        var player = $(this);

        // Count number of players of each position that have been clicked
        var pickedF = $(".player--forward.is-selected").length;
        var pickedD = $(".player--defenseman.is-selected").length;
        var pickedG = $(".player--goalie.is-selected").length;

        // Grab the name of the player last clicked
        playerName = player.find(".player__name").text();

        // Literally magic.
        $(".btn--add").unbind("click");

        $(".btn--add").click(function(){

            // Ensures names don't match
            var spanText = $(".player__pick").eq(0).text();

            // Changes the opacity of a picked player to 0.5
            player.addClass("is-selected");

            if (player.hasClass("player--forward")) {
                if (spanText !== playerName) {
                    $(".player__pick--forward.is-empty").eq(0).html(playerName);
                    $(".player__pick--forward.is-empty").eq(0).removeClass("is-empty");

                    if (pickedF < 2) {
                        pickedF++;
                    }

                    if (pickedF === 2) {
                        $(".player--forward").not(":has(.is-selected)").css("pointer-events", "none");
                        console.log("Locked forwards");
                    } else {
                        $(".player--forward").css("pointer-events", "auto");
                    }
                }
            }

            if (player.hasClass("player--defenseman")) {
                if (spanText !== playerName) {
                    $(".player__pick--defenseman.is-empty").eq(0).html(playerName);
                    $(".player__pick--defenseman.is-empty").eq(0).removeClass("is-empty");

                    if (pickedD < 3) {
                        pickedD++;
                    }

                    if (pickedD === 3) {
                        $(".player--defenseman").not(":has(.is-selected)").css("pointer-events", "none");
                        console.log("Locked defensemen");
                    } else {
                        $(".player--defenseman").css("pointer-events", "auto");
                    }
                }
            }

            if (player.hasClass("player--goalie")) {
                if (spanText !== playerName) {
                    $(".player__pick--goalie.is-empty").eq(0).html(playerName);
                    $(".player__pick--goalie.is-empty").eq(0).removeClass("is-empty");

                    if (pickedG < 1){
                        pickedG++;
                    }

                    if (pickedG === 1) {
                        $(".player--goalie").not(":has(.is-selected)").css("pointer-events", "none");
                        console.log("Locked goalie");
                    } else {
                        $(".player--goalie").css("pointer-events", "auto");
                    }
                }
            }

            console.log(pickedF, pickedD, pickedG);
        });

        $(".btn--remove").click(function(){
            player.removeClass("is-selected");

            if (player.hasClass("player--forward")) {
                $(".player__pick--forward").eq(0).html("Pick a Forward");
                $(".player__pick--forward").eq(0).addClass("is-empty");
            }

            if (player.hasClass("player--defenseman")) {
                $(".player__pick--defenseman").eq(0).html("Pick a Defenseman");
                $(".player__pick--defenseman").eq(0).addClass("is-empty");
            }

            if (player.hasClass("player--goalie")) {
                $(".player__pick--goalie").eq(0).html("Pick a Goalie");
                $(".player__pick--goalie").eq(0).addClass("is-empty");
            }

            console.log(pickedF, pickedD, pickedG);
        });
    });

}