比较两个字符串的文本，eq 的问题

Question

问题

对于作为防守队员.player--defenseman 的曲棍球运动员，多次单击"Add to Team" 按钮btn-add 会在每次单击后替换一个跨度文本，但不应多次添加该球员的姓名.

我在哪里

• 我尝试使用以下 if 语句 spanText !== playerName 来比较两个字符串，但是当我 console.log 字符串时，我得到默认文本 "Pick a defenseman" 然后是那个玩家的名字，尽管那个玩家是已选中，并且他的名字已经在范围内
• 我感觉问题可能出在变量 spanText 或 eq(0) 上，尤其是与防守队员打交道的部分

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++;
                        }

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

                // Something is wonky here
                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");

                        console.log(spanText);
                        console.log(playerName);

                        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 (pickedF > 0 && pickedF < 2) {
                        pickedF--;
                    }
                }

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

                    if (pickedD > 0 && pickedD < 3){
                        pickedD--;
                    }
                }

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

                    if (pickedG > 0){
                        pickedG--;
                    }
                }

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

index.html

曲棍球运动员

<div class="player player--plante player--goalie" data-id="30">
    <div class="player__info animated">
        <p class="player__name">Jacques Plante</p>
        <p class="player__position">Goalie</p>
    </div>
</div>

<div class="player player--brown player--defenseman" data-id="31">
    <div class="player__info animated">
        <p class="player__name">Jeff Brown</p>
        <p class="player__position">Defenseman</p>
    </div>
</div>

<div class="player player--roberts player--defenseman" data-id="32">
    <div class="player__info animated">
        <p class="player__name">Jimmy Roberts</p>
        <p class="player__position">Defenseman</p>
    </div>
</div>

<div class="player player--mullen player--forward" data-id="33">
    <div class="player__info animated">
        <p class="player__name">Joe Mullen</p>
        <p class="player__position">Forward</p>
    </div>
</div>

index.html

带跨度的列表

        <ul>
            <li><span class="player__pick player__pick--forward is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a forward</span></li>
            <li><span class="player__pick player__pick--forward is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a forward</span></li>
            <li><span class="player__pick player__pick--defenseman is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a defenseman</span></li>
            <li><span class="player__pick player__pick--defenseman is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a defenseman</span></li>
            <li><span class="player__pick player__pick--defenseman is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a defenseman</span></li>
            <li><span class="player__pick player__pick--goalie is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a goalie</span></li>
        </ul>

index.html

弹出btn--add

<div class="popup clearfix">
    <div class="icon-container">
        <i class="fa fa-times" aria-hidden="true"></i>
    </div>
        <img src="" alt="" class="popup__picture animated">

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

Answer 1

尝试使用 != 仅比较字符串内容。