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

Question

问题

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

我在哪里

• 我尝试使用下面的if-语句spanText !== playerName来比较这两个字符串，但是当我对字符串进行比较时，我得到的是默认文本"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

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