单击时两个字符串的文本不匹配

Question

Objective

我正在尝试比较两个字符串的文本 — 第一个是包含跨度的列表中的文本。它的默认文本显示为 "Pick a defenseman"，然后是刚刚单击的玩家的名称。
目的是让曲棍球运动员的名字只被点击替换默认文本，添加到此列表一次，而不是多次。

问题

当我 console.log() 我仍然看到默认文本，尽管玩家的名字被添加到跨度中。因此，当我使用包含 spanText !== playerName 的 if 语句时，我仍然可以多次添加同一玩家，但我不确定为什么这只发生在 .player--defenseman 而不是其他玩家职位

scripts.js

$(".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);
    });

index.html

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

// Popup with Add to Team button
    <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>

// Players
        <div class="player player--pronger player--defenseman" data-id="16">
            <div class="player__info animated">
                <p class="player__name">Chris Pronger</p>
                <p class="player__position">Defenseman</p>
            </div>
        </div>

        <div class="player player--lefley player--forward" data-id="17">
            <div class="player__info animated">
                <p class="player__name">Chuck Lefley</p>
                <p class="player__position">Forward</p>
            </div>
        </div>

        <div class="player player--janney player--forward" data-id="18">
            <div class="player__info animated">
                <p class="player__name">Craig Janney</p>
                <p class="player__position">Forward</p>
            </div>
        </div>

        <div class="player player--joseph player--goalie" data-id="19">
            <div class="player__info animated">
                <p class="player__name">Curtis Joseph</p>
                <p class="player__position">Goalie</p>
            </div>
        </div>

Answer 1

问题出在这一行：

var spanText = $(".player__pick").eq(0).text();

它选择第一个带有 player__pick class 的元素。
这就是为什么：

if (spanText !== playerName) {

将始终将 playerName 与 第一个元素 与 player__pick class 进行比较。它不会检查目标元素是 "defenseman"、"forward" 还是 "goalie".

解决方案？

修复它的方法很少。其中之一是检查 any 中的 .player__pick 个元素 contains player name:

var player_exists = $('.player__pick:contains("'+playerName+'")').length;

然后：

if (!player_exists) {
    // do the stuff...
}

JSFiddle

单击时两个字符串的文本不匹配

Text of two strings not matching on click

javascript

comparison

jquery

if-statement

string-comparison

Objective

问题

scripts.js

index.html